@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 45 920;
    font-display: swap;
    src: url('../assets/fonts/PretendardVariable.woff2') format('woff2-variations');
}

#EntryPopupContainer {
    position: fixed;
    z-index: 9990;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

:root {
    --rocode-font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rocode-action: #4f80ff;
    --rocode-action-hover: #3568e6;
    --rocode-action-pressed: #2854c7;
    --rocode-action-soft: #eef4ff;
    --rocode-focus: #1f4fbf;
    --rocode-danger: #c43d3d;
    --rocode-danger-hover: #a92f2f;
    --rocode-disabled-bg: #dbe3ea;
    --rocode-disabled-text: #687887;
    --rocode-header-surface: #eaf0fb;
    --rocode-header-gradient: linear-gradient(110deg, #e6f0ff 0%, #eaedff 54%, #eee3f9 100%);
    --rocode-header-border: #c8d4e7;
    --rocode-header-control: #ffffff;
    --rocode-header-text: #294b61;
    --rocode-header-text-muted: #5f7482;
    --rocode-header-height: 52px;
    --rocode-header-control-height: 32px;
    --rocode-header-control-radius: 9px;
    font-family: var(--rocode-font-family);
    color: #17324d;
    background: #ffffff;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: var(--rocode-font-family);
}

button,
input,
select,
textarea,
#workspace,
#workspace .entry,
#workspace .entry div,
#workspace .entry span,
#workspace .entry p,
#workspace .entry ul,
#workspace .entry li,
#workspace .entry a,
#workspace .entry button,
#workspace .entry input,
#workspace .entry select,
#workspace .entry textarea,
#workspace .entry text,
#EntryPopupContainer,
#EntryPopupContainer button,
#EntryPopupContainer input,
#EntryModalContainer,
#EntryModalContainer button,
#EntryModalContainer input,
#EntryListContainer,
#EntryListContainer button,
#EntryListContainer input {
    font-family: var(--rocode-font-family) !important;
}

/* The legacy Entry popup links to Korean copyright guidance. RoCode uses the
   concise English permission reminder beside it, so the unrelated link is hidden. */
a[href*='copyright.or.kr'] {
    display: none !important;
}

/* RoCode action hierarchy: blue is primary/selected, outlined is secondary,
   and red is reserved for stopping or destructive actions. */
#workspace .entryRunButtonWorkspace_w {
    border-color: var(--rocode-action) !important;
    color: #ffffff !important;
    background-color: var(--rocode-action) !important;
    transition: background-color 120ms ease, border-color 120ms ease,
        box-shadow 120ms ease, transform 80ms ease;
}

#workspace .entryRunButtonWorkspace_w:hover {
    border-color: var(--rocode-action-hover) !important;
    background-color: var(--rocode-action-hover) !important;
    box-shadow: 0 2px 6px rgba(40, 84, 199, 0.24);
}

#workspace .entryRunButtonWorkspace_w:active {
    border-color: var(--rocode-action-pressed) !important;
    background-color: var(--rocode-action-pressed) !important;
    box-shadow: none;
    transform: translateY(1px);
}

#workspace .entryAddButtonWorkspace_w {
    border-color: var(--rocode-action) !important;
    color: var(--rocode-action) !important;
    background-color: #ffffff !important;
    transition: background-color 120ms ease, border-color 120ms ease,
        color 120ms ease, transform 80ms ease;
}

#workspace .entryAddButtonWorkspace_w:hover {
    border-color: var(--rocode-action-hover) !important;
    color: var(--rocode-action-hover) !important;
    background-color: var(--rocode-action-soft) !important;
}

#workspace .entryAddButtonWorkspace_w:active {
    border-color: var(--rocode-action-pressed) !important;
    color: var(--rocode-action-pressed) !important;
    background-color: #e1ebff !important;
    transform: translateY(1px);
}

#workspace .entryStopButtonWorkspace_w {
    border-color: var(--rocode-danger) !important;
    color: #ffffff !important;
    background-color: var(--rocode-danger) !important;
    transition: background-color 120ms ease, border-color 120ms ease,
        box-shadow 120ms ease, transform 80ms ease;
}

#workspace .entryStopButtonWorkspace_w::before {
    width: 10px !important;
    height: 10px !important;
    margin: 11px 5px 0 0 !important;
    border-radius: 1px;
    background: #ffffff !important;
}

#workspace .entryStopButtonWorkspace_w:hover {
    border-color: var(--rocode-danger-hover) !important;
    background-color: var(--rocode-danger-hover) !important;
    box-shadow: 0 2px 6px rgba(169, 47, 47, 0.22);
}

#workspace .entryStopButtonWorkspace_w:active {
    box-shadow: none;
    transform: translateY(1px);
}

#workspace button:focus-visible,
#EntryPopupContainer button:focus-visible,
#EntryPopupContainer a[role='button']:focus-visible,
#EntryModalContainer button:focus-visible,
#EntryModalContainer a[role='button']:focus-visible {
    outline: 3px solid var(--rocode-focus) !important;
    outline-offset: 2px;
}

#EntryPopupContainer header a[role='button'] {
    transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

#EntryPopupContainer header a[role='button']:hover {
    filter: brightness(0.9);
    box-shadow: 0 2px 6px rgba(40, 84, 199, 0.22);
}

#EntryPopupContainer header a[role='button']:active {
    filter: brightness(0.8);
    box-shadow: none;
    transform: translateY(1px);
}

#workspace button:disabled,
#workspace [role='button'][aria-disabled='true'],
#EntryPopupContainer button:disabled,
#EntryPopupContainer [role='button'][aria-disabled='true'],
#EntryPopupContainer [class*='disabled'] {
    border-color: var(--rocode-disabled-bg) !important;
    color: var(--rocode-disabled-text) !important;
    background-color: var(--rocode-disabled-bg) !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

#EntryPopupContainer .rocodeSelectionDisabled {
    border-color: var(--rocode-disabled-bg) !important;
    color: var(--rocode-disabled-text) !important;
    background-color: var(--rocode-disabled-bg) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Entry reserves the right-hand padding for its search button. Size the
   whole field, not just the input, so text cannot extend under that button. */
#EntryPopupContainer div:has(> input#srch) {
    box-sizing: border-box;
    width: clamp(194px, 30vw, 300px);
}

html[lang='zh-CN'] {
    --rocode-font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC',
        'Noto Sans CJK SC', 'Pretendard', sans-serif;
}

/* Match Thai SVG/canvas measurements; system fallback also works offline. */
html[lang='th'] {
    --rocode-font-family: 'Tahoma', sans-serif;
}

/* The same Khmer-capable font is used for SVG labels and canvas measurement. */
html[lang='km'] {
    --rocode-font-family: 'Leelawadee UI', 'Noto Sans Khmer', 'Khmer OS System', sans-serif;
}

/* Native Entry panels set EntryFont on descendants instead of inheriting the
   root font. Override text surfaces only, leaving code editors and icons alone. */
html[lang='km'] #workspace :is(div, span, p, ul, li, a, text, td):not(.CodeMirror *) {
    font-family: var(--rocode-font-family) !important;
}

html[lang='km'] .entryVariableSelectButtonWorkspace.func .text {
    margin-right: 4px;
}

html[lang='tl'] .entryVariableSelectButtonWorkspace.func .text {
    margin-right: 4px;
}

/* Keep all four labels inside the native 254px tab strip, including Katangian. */
html[lang='tl'] #workspace .entryTabListItemWorkspace {
    font-size: 12px;
}

/* Keep the complete Khmer/Tagalog Clear All labels above the canvas. */
html[lang='km'] .withControlBtnWrapper.edit,
html[lang='tl'] .withControlBtnWrapper.edit {
    width: 70px;
    min-width: 70px;
}

html[lang='km'] .withControlBtnWrapper.edit .label,
html[lang='tl'] .withControlBtnWrapper.edit .label {
    white-space: nowrap;
}

#EntryPopupContainer input#srch {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    text-overflow: ellipsis;
    border-radius: 9px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

#EntryPopupContainer input#srch:focus {
    border-color: var(--rocode-action) !important;
    box-shadow: 0 0 0 3px rgba(74, 108, 248, 0.16);
    outline: 0;
}

#EntryPopupContainer #popupList {
    position: relative;
}

#EntryPopupContainer .rocodeAssetCard {
    position: relative;
}

#EntryPopupContainer .rocodeAssetCard[data-rocode-audio-language='ko']::after {
    content: 'Korean';
    position: absolute;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 6px;
    border-radius: 4px;
    background: #ffffff;
    color: #506b7c;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    pointer-events: none;
}

html[lang='th'] #EntryPopupContainer .rocodeAssetCard[data-rocode-audio-language='ko']::after {
    content: 'ภาษาเกาหลี';
    white-space: nowrap;
}

html[lang='km'] #EntryPopupContainer .rocodeAssetCard[data-rocode-audio-language='ko']::after {
    content: 'ភាសាកូរ៉េ';
    white-space: nowrap;
}

html[lang='tl'] #EntryPopupContainer .rocodeAssetCard[data-rocode-audio-language='ko']::after {
    content: 'Koreano';
    white-space: nowrap;
}

html[lang='id'] #EntryPopupContainer .rocodeAssetCard[data-rocode-audio-language='ko']::after,
html[lang='ms'] #EntryPopupContainer .rocodeAssetCard[data-rocode-audio-language='ko']::after {
    content: 'Bahasa Korea';
    white-space: nowrap;
}

#EntryPopupContainer .rocodeAssetCard img {
    transition: opacity 160ms ease;
}

#EntryPopupContainer .rocodeAssetSelect {
    position: absolute;
    z-index: 20;
    top: 6px;
    left: 6px;
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 2px solid #b9c8dc;
    border-radius: 50%;
    color: transparent;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 8px rgba(36, 57, 91, 0.12);
    cursor: pointer;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    transition: color 120ms ease, border-color 120ms ease,
        background-color 120ms ease, transform 80ms ease;
}

#EntryPopupContainer .rocodeAssetSelect:hover {
    border-color: var(--rocode-action);
    color: var(--rocode-action);
}

#EntryPopupContainer .rocodeAssetSelect[aria-pressed='true'] {
    border-color: var(--rocode-action);
    color: #ffffff;
    background: var(--rocode-action);
}

#EntryPopupContainer .rocodeAssetSelect:active {
    transform: scale(0.92);
}

#EntryPopupContainer .rocodeAssetSelect:focus-visible {
    outline: 3px solid var(--rocode-focus);
    outline-offset: 2px;
}

#EntryPopupContainer .rocodeAssetFavorite {
    position: absolute;
    z-index: 20;
    top: 6px;
    right: 6px;
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 1px solid #d5dfef;
    border-radius: 50%;
    color: #6b7a90;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 8px rgba(36, 57, 91, 0.14);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: color 120ms ease, border-color 120ms ease,
        background-color 120ms ease, transform 80ms ease;
}

#EntryPopupContainer .rocodeAssetFavorite:hover,
#EntryPopupContainer .rocodeAssetFavorite[aria-pressed='true'] {
    border-color: #f4bf36;
    color: #e39b00;
    background: #fff9e7;
}

#EntryPopupContainer .rocodeAssetFavorite:active {
    transform: scale(0.92);
}

#EntryPopupContainer .rocodeAssetFavorite:focus-visible {
    outline: 3px solid var(--rocode-focus);
    outline-offset: 2px;
}

#EntryPopupContainer .rocodeAssetLibraryStatus {
    position: absolute;
    inset: 16px;
    display: grid;
    min-height: 180px;
    padding: 30px;
    place-items: center;
    border: 1px dashed #c8d5e7;
    border-radius: 12px;
    color: #62738a;
    background: #f8fbff;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}

#EntryPopupContainer .rocodeAssetSelectionCount {
    font-size: 0;
}

#EntryPopupContainer .rocodeAssetSelectionCount::before {
    content: attr(data-rocode-label);
    font-size: 12px;
}

#EntryPopupContainer .rocodeAssetLibraryLoading::before {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    border: 3px solid #d8e2f7;
    border-top-color: var(--rocode-action);
    border-radius: 50%;
    animation: rocodeAssetLibrarySpin 700ms linear infinite;
    content: '';
}

@keyframes rocodeAssetLibrarySpin {
    to {
        transform: rotate(360deg);
    }
}

#workspace button:disabled img,
#workspace button:disabled svg,
#workspace [role='button'][aria-disabled='true'] img,
#workspace [role='button'][aria-disabled='true'] svg,
#EntryPopupContainer button:disabled img,
#EntryPopupContainer button:disabled svg {
    filter: grayscale(1) !important;
    opacity: 0.48 !important;
}

@media (prefers-reduced-motion: reduce) {
    #workspace .entryRunButtonWorkspace_w,
    #workspace .entryAddButtonWorkspace_w,
    #workspace .rocodeMainboardOnBoardAction,
    #workspace .rocodeLiveFirmwareAction,
    #workspace .rocodeLiveConnectionChoices button[data-hardware-action],
    #workspace .entryStopButtonWorkspace_w,
    #EntryPopupContainer header a[role='button'],
    #EntryPopupContainer .rocodeAssetSelect,
    #EntryPopupContainer .rocodeAssetFavorite {
        transition: none;
    }

    #EntryPopupContainer .rocodeAssetLibraryLoading::before {
        animation: none;
    }
}

#workspace .CodeMirror,
#workspace .CodeMirror * {
    font-family: monospace !important;
}

/* Keep the usual arrow over empty canvas; native drag-to-pan still works.
   Blocks and scrollbar handles retain their own interaction cursors. */
#workspace .entryBoard {
    cursor: default;
}

/* Entry Paint is mounted as a separate React surface and the object title on
   the block board is SVG text with an inline Nanum font. Keep both surfaces in
   RoCode's Pretendard type system without affecting the monospace code editor. */
#workspace .entryPlaygroundPainter,
#workspace .entryPlaygroundPainter *,
#workspace .entryBoardObjectName,
#workspace .svgObjectBlockCount text {
    font-family: var(--rocode-font-family) !important;
}

/* Translated Add Image labels may wrap, but must not push Draw underneath
   Entry's image list, which starts at a fixed 56px offset. */
#workspace .entryPlaygroundAddPicture {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 6px;
    height: 56px;
    padding: 7px;
    box-sizing: border-box;
}

#workspace .entryPlaygroundAddPictureInner,
#workspace .entryPlaygroundNewPictureInner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 2px 4px;
    line-height: 15px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Object properties are frequent student actions. Give the fields and icons
   comfortable targets without scaling the stage or changing project values.
   Rows wrap when the stage divider leaves a particularly narrow object list. */
#workspace .entryContainerListElementWorkspace {
    min-height: 64px;
    height: auto;
}

#workspace .objectInfoView {
    width: 26px;
    height: 64px;
    margin-left: 6px;
}

#workspace .objectInfo_visible,
#workspace .objectInfo_unlock {
    width: 26px;
    height: 26px;
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
}

#workspace .objectInfo_visible {
    top: 5px;
}

#workspace .objectInfo_unlock {
    top: 33px;
}

#workspace .entryObjectThumbnailWorkspace {
    top: 10px;
    left: 38px;
    width: 44px;
    height: 44px;
}

#workspace .entryObjectWrapperWorkspace {
    margin: 15px 72px 0 88px;
}

#workspace .entryObjectNameWorkspace {
    height: 34px;
    padding: 6px;
    font-family: var(--rocode-font-family) !important;
    font-size: 14px;
    line-height: 20px;
}

#workspace .entryObjectInformationWorkspace,
#workspace .entryObjectDeleteWorkspace {
    top: 18px;
    width: 28px;
    height: 28px;
    background-size: 12px;
}

#workspace .entryObjectInformationWorkspace {
    right: 36px;
}

#workspace .entryObjectDeleteWorkspace {
    right: 4px;
}

#workspace .entryObjectRotationWrapperWorkspace {
    height: auto;
    padding: 12px 0;
}

#workspace .entryObjectCoordinateWorkspace,
#workspace .entryObjectRotateLabelWrapperWorkspace {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 8px;
    letter-spacing: normal;
}

#workspace .entryObjectRotateLabelWrapperWorkspace {
    margin-top: 10px;
}

#workspace .entryObjectCoordinateWorkspaceWrapper,
#workspace .entryObjectCoordinateSizeWrapper {
    margin: 0;
}

#workspace .entryObjectCoordinateSizeWrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

#workspace .entryObjectCoordinateSizeWorkspace {
    margin: 0;
    font-size: 12px;
    line-height: 32px;
}

#workspace .entryObjectCoordinateInputWorkspace,
#workspace .entryObjectRotateInputWorkspace,
#workspace .entryObjectDirectionInputWorkspace {
    width: 72px;
    height: 32px;
    padding: 0 19px 0 8px;
    font-size: 13px;
    line-height: 30px;
    letter-spacing: normal;
}

#workspace .entryObjectCoordinateSpanWorkspace {
    top: 9px;
    right: 6px;
    font-size: 12px;
    line-height: 14px;
}

#workspace .entryObjectCoordinateSpanWorkspace.degree {
    top: 8px;
    width: 5px;
    height: 5px;
}

#workspace .entryObjectRotateWorkspaceWrapper,
#workspace .entryObjectDirectionWorkspaceWrapper,
#workspace .rotationMethodWrapper {
    display: grid;
    position: relative;
    grid-template-columns: 72px;
    gap: 6px;
    float: none;
    bottom: auto;
    margin: 0;
    padding: 0;
}

#workspace .entryObjectRotateInputWorkspace,
#workspace .entryObjectDirectionInputWorkspace {
    grid-area: 1 / 1;
}

#workspace .rotationMethodWrapper {
    grid-template-columns: repeat(3, 32px);
}

#workspace .entryObjectRotateSpanWorkspace,
#workspace .entryObjectDirectionSpanWorkspace,
#workspace .entryObjectRotateMethodLabelWorkspace {
    position: static;
    grid-row: 2;
    grid-column: 1 / -1;
    font-size: 12px;
    line-height: 16px;
    overflow-wrap: anywhere;
}

#workspace .entryObjectRotateModeWorkspace {
    grid-row: 1;
    width: 32px;
    height: 32px;
    margin: 0;
    background-size: 32px;
}

/* The vendor's SVG embeds a Nanum font. Use the input's real value so the
   rotation label shares the same font and accessibility as other controls. */
#workspace .entryPlaygroundPainter .Rotate90Btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--rocode-action);
    border-radius: 50%;
    color: var(--rocode-action);
    background: #ffffff !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
}

#workspace .entryPlaygroundPainter .Rotate90Btn:not(:disabled):hover {
    background: var(--rocode-action-soft) !important;
}

#workspace .entryPlaygroundPainter .Rotate90Btn:focus-visible {
    outline: 2px solid var(--rocode-focus);
    outline-offset: 2px;
}

/* Entry renders block labels with a hard-coded bold attribute. Pretendard's
   semibold weight preserves legibility on colored blocks without the heavy,
   crowded appearance of its full bold weight. */
#workspace .svgBlockGroup .block text {
    font-weight: 600 !important;
}

#workspace {
    --rocode-category-width: 88px;
    /* Keep RoCode anchored to the viewport. Entry can move the document's
       scroll position while focusing palette items, which otherwise pushes
       the project header above the visible area. */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-width: 0;
}

/* Entry's editor columns historically occupied the entire viewport. RoCode's
   header is in normal flow, so those columns must use the remaining height or
   their trash target and scroll limits end up below the visible window. */
#workspace > .engineContainer,
#workspace > .entryPlaygroundWorkspace {
    height: calc(100% - var(--rocode-header-height));
}

/* Adaptive workspace -----------------------------------------------------
   Entry already exposes a draggable divider for its stage/object region.
   RoCode keeps that original slider and uses the same layout API to protect
   the coding canvas on classroom-sized screens. */

#workspace.rocodeAdaptiveWorkspace[data-stage-panel='collapsed']
    > .engineContainer {
    border-right: 1px solid #d7e2e8;
    background: #f7fafc;
}

#workspace.rocodeAdaptiveWorkspace .entrySceneListWorkspace {
    max-width: calc(100% - 110px);
}

#workspace .entryCategoryListWorkspace {
    width: var(--rocode-category-width);
    min-width: var(--rocode-category-width);
}

/* The block palette remains 254px wide. Move the coding area with its wider
   category rail; wideView intentionally omits the rail in Entry. */
#workspace .entryWorkspaceBoard:not(.wideView) {
    left: calc(var(--rocode-category-width) + 254px);
}

/* The original handle and fold animations assume a 58px category rail.
   Keep the existing toggle and animation-end callbacks, but align every
   state with RoCode's wider translated category labels. */
#workspace .entryPlaygroundResizeWorkspace {
    left: calc(var(--rocode-category-width) + 252px);
    /* The palette can extend over the board for long blocks after reopening. */
    z-index: 301;
}

#workspace .entryPlaygroundResizeWorkspace.folding {
    animation-name: rocodeFoldMenuHandle;
}

#workspace .entryPlaygroundResizeWorkspace.unfolding {
    animation-name: rocodeUnfoldMenuHandle;
}

#workspace .entryWorkspaceBoard:not(.wideView).folding {
    animation-name: rocodeFoldMenuBoard;
}

#workspace .entryWorkspaceBoard:not(.wideView).foldOut {
    animation-name: rocodeUnfoldMenuBoard;
}

@keyframes rocodeFoldMenuHandle {
    from { left: calc(var(--rocode-category-width) + 252px); }
    to { left: var(--rocode-category-width); }
}

@keyframes rocodeUnfoldMenuHandle {
    from { left: var(--rocode-category-width); }
    to { left: calc(var(--rocode-category-width) + 252px); }
}

@keyframes rocodeFoldMenuBoard {
    from { left: calc(var(--rocode-category-width) + 254px); }
    to { left: calc(var(--rocode-category-width) + 1px); }
}

@keyframes rocodeUnfoldMenuBoard {
    from { left: calc(var(--rocode-category-width) + 1px); }
    to { left: calc(var(--rocode-category-width) + 254px); }
}

@media (prefers-reduced-motion: reduce) {
    #workspace .entryPlaygroundResizeWorkspace:is(.folding, .unfolding),
    #workspace .entryWorkspaceBoard:not(.wideView):is(.folding, .foldOut) {
        /* Entry still needs animationend to refresh the canvas scrollbars. */
        animation-duration: 1ms !important;
    }
}

#workspace .entryCategoryListWorkspace .scrollIndicator {
    width: 100%;
    background-position: center;
}

#workspace .entryCategoryElementWorkspace {
    font-family: var(--rocode-font-family) !important;
    padding-left: 4px;
    padding-right: 4px;
    overflow-wrap: anywhere;
    background-position: 50% 4px;
    background-size: 32px auto;
    transition:
        background-position 145ms cubic-bezier(0.2, 0.75, 0.3, 1),
        background-size 145ms cubic-bezier(0.2, 0.75, 0.3, 1),
        background-color 135ms ease,
        filter 135ms ease;
}

#workspace
    .entryCategoryElementWorkspace:not(.entrySelectedCategory):is(:hover, :focus-visible) {
    background-color: #f6fbfe;
    background-position: 50% 2px;
    background-size: 38px auto;
}

#workspace .entryCategoryElementWorkspace:not(.entrySelectedCategory):focus-visible {
    outline: 2px solid var(--rocode-focus);
    outline-offset: -3px;
}

#workspace .entryCategoryElementWorkspace:not(.entrySelectedCategory):active {
    background-position: 50% 4px;
    background-size: 35px auto;
}

#workspace .entryCategoryElementWorkspace.entrySelectedCategory:hover {
    background-position: 50% 2px;
    background-size: 37px auto;
    filter: brightness(1.045) saturate(1.04);
}

/* Entry's Text category uses a Korean character in both its default and
   selected artwork. A neutral letterform keeps the category recognizable in
   every language while preserving the rail's existing color behavior. */
#workspace #entryCategorytext {
    background-image: none !important;
}

#workspace #entryCategorytext::before {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 25px;
    height: 25px;
    background-color: #e43500;
    content: '';
    transform: translateX(-50%);
    transition: transform 145ms cubic-bezier(0.2, 0.75, 0.3, 1);
    -webkit-mask: url('../assets/controls/text-category.svg') center / contain no-repeat;
    mask: url('../assets/controls/text-category.svg') center / contain no-repeat;
}

#workspace #entryCategorytext.entrySelectedCategory::before {
    background-color: #ffffff;
}

#workspace #entryCategorytext:not(.entrySelectedCategory):is(:hover, :focus-visible)::before {
    transform: translateX(-50%) translateY(-2px) scale(1.18);
}

#workspace #entryCategorytext:not(.entrySelectedCategory):active::before {
    transform: translateX(-50%) scale(1.09);
}

#workspace #entryCategorytext.entrySelectedCategory:hover::before {
    transform: translateX(-50%) translateY(-2px) scale(1.15);
}

/* TextBox formatting uses Entry's Korean character artwork. Keep the actions
   unchanged, but present the familiar Latin typography controls instead. */
body :is(
        [class*='imbtn_pop_font_bold'],
        [class*='imbtn_pop_font_underline'],
        [class*='imbtn_pop_font_italic'],
        [class*='imbtn_pop_font_through']
    ) {
    position: relative;
    color: #586a77;
    background-color: #ffffff;
    background-image: none !important;
    font-family: var(--rocode-font-family);
    transition: color 120ms ease, background-color 120ms ease,
        border-color 120ms ease, transform 80ms ease;
}

body :is(
        [class*='imbtn_pop_font_bold'],
        [class*='imbtn_pop_font_underline'],
        [class*='imbtn_pop_font_italic'],
        [class*='imbtn_pop_font_through']
    )::before {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    content: '';
    font-size: 21px;
    line-height: 1;
}

body [class*='imbtn_pop_font_bold']::before {
    content: 'B';
    font-weight: 800;
}

body [class*='imbtn_pop_font_underline']::before {
    content: 'U';
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body [class*='imbtn_pop_font_italic']::before {
    content: 'I';
    padding-right: 3px;
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: 700;
}

body [class*='imbtn_pop_font_through']::before {
    content: 'S';
    font-weight: 650;
    text-decoration: line-through;
}

/* The text-color picker ships with a Korean letter baked into a bitmap.
   Rebuild the face in CSS so it reads consistently in every language. The
   existing em element remains the live swatch Entry updates after a choice. */
body [class*='imbtn_pop_font_color'] {
    position: relative;
    color: #586a77;
    background-color: #ffffff;
    background-image: linear-gradient(#e0e6ec, #e0e6ec) !important;
    background-position: 40px 5px !important;
    background-repeat: no-repeat !important;
    background-size: 1px 30px !important;
    font-family: var(--rocode-font-family);
    transition: color 120ms ease, background-color 120ms ease,
        border-color 120ms ease, transform 80ms ease;
}

body [class*='imbtn_pop_font_color']::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 34px;
    display: grid;
    place-items: center;
    content: 'A';
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

body [class*='imbtn_pop_font_color']::after {
    position: absolute;
    top: 17px;
    right: 9px;
    width: 0;
    height: 0;
    border-top: 6px solid #8696a3;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: '';
}

body [class*='imbtn_pop_font_color'] em {
    position: absolute !important;
    z-index: 1 !important;
    right: auto !important;
    bottom: 6px !important;
    left: 10px !important;
    top: auto !important;
    width: 20px !important;
    height: 3px !important;
    border-radius: 2px;
    pointer-events: none;
}

body [class*='imbtn_pop_font_color']:hover {
    color: #245fc7;
    border-color: #9ebcf5;
    background-color: #f2f6ff;
}

body [class*='imbtn_pop_font_color']:is(.on, [class*='on__']) {
    color: #245fc7;
    border-color: #4f80ff;
    background-color: #edf3ff;
}

body [class*='imbtn_pop_font_color']:active {
    transform: translateY(1px);
}

body :is(
        [class*='imbtn_pop_font_bold'],
        [class*='imbtn_pop_font_underline'],
        [class*='imbtn_pop_font_italic'],
        [class*='imbtn_pop_font_through']
    ):hover {
    color: #245fc7;
    border-color: #9ebcf5;
    background-color: #f2f6ff;
}

body :is(
        [class*='imbtn_pop_font_bold'],
        [class*='imbtn_pop_font_underline'],
        [class*='imbtn_pop_font_italic'],
        [class*='imbtn_pop_font_through']
    ):is(.on, [class*='on__']) {
    color: #245fc7;
    border-color: #4f80ff;
    background-color: #edf3ff;
}

body :is(
        [class*='imbtn_pop_font_bold'],
        [class*='imbtn_pop_font_underline'],
        [class*='imbtn_pop_font_italic'],
        [class*='imbtn_pop_font_through']
    ):active {
    transform: translateY(1px);
}

/* The primary editor tabs share the available width, giving each destination
   a consistent target size and preventing the longer Attribute label from
   feeling cramped. */
#workspace .entryTabListWorkspace {
    display: flex;
    width: 254px;
    align-items: stretch;
    gap: 2px;
}

#workspace .entryTabListItemWorkspace {
    float: none;
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    margin-left: 0;
    letter-spacing: 0;
    line-height: 36px;
    transition: color 120ms ease, background-color 120ms ease;
}

#workspace .entryTabListItemWorkspace:not(.entryTabSelected):hover {
    color: #506b7c;
    background-color: #c9dfed;
}

/* Use music Tori for the empty-sound mascot and keep the guide aligned
   with RoCode's visual language. */
#workspace .entryPlaygroundSoundEdit h4::before {
    width: 58px !important;
    height: 58px !important;
    margin-right: 10px !important;
    background: url('../assets/characters/torimusic.png') no-repeat center / contain !important;
}

.rocodeAppHeader {
    display: flex;
    position: relative;
    z-index: 300;
    box-sizing: border-box;
    width: 100%;
    height: var(--rocode-header-height);
    align-items: center;
    padding: 0 16px;
    border-bottom: 0;
    background-image: var(--rocode-header-gradient);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% calc(var(--rocode-header-height) + 38px);
    box-shadow: none;
}

.roboThinkLogo {
    display: block;
    position: relative;
    z-index: 1;
    width: 148px;
    height: 40px;
    flex: 0 0 148px;
    border-radius: 8px;
    transition: background-color 140ms ease, transform 100ms ease;
}

.roboThinkLogo:hover {
    background-color: #e6eef2;
}

.roboThinkLogo:active {
    transform: translateY(1px);
}

.roboThinkLogo:focus-visible {
    outline: 3px solid var(--rocode-focus);
    outline-offset: 1px;
}

.roboThinkLogo::after {
    position: absolute;
    z-index: 0;
    top: 6px;
    left: 2px;
    width: 140px;
    height: 28px;
    content: '';
    background: url('../assets/brand/rocode-logo.png?v=2') no-repeat center / contain;
}

.rocodeProjectIdentity {
    display: flex;
    box-sizing: border-box;
    width: clamp(132px, 18vw, 220px);
    min-width: 112px;
    height: 44px;
    flex: 0 1 220px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    margin-left: 10px;
    padding: 3px 8px 2px;
    border-left: 1px solid rgba(139, 160, 177, 0.42);
}

.rocodeProjectName {
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    height: 23px;
    flex: 0 0 23px;
    padding: 1px 5px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--rocode-header-text);
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rocodeProjectName:hover {
    border-color: rgba(173, 194, 206, 0.72);
    background: rgba(255, 255, 255, 0.42);
}

.rocodeProjectName:focus {
    border-color: #8aa9bb;
    outline: 2px solid var(--rocode-focus);
    outline-offset: -2px;
    background: #ffffff;
}

.rocodeProjectSaveState {
    display: flex;
    min-width: 0;
    flex: 0 0 13px;
    align-items: center;
    gap: 5px;
    padding: 0 5px;
    color: #607786;
    font-size: 10px;
    font-weight: 650;
    line-height: 13px;
    white-space: nowrap;
}

.rocodeProjectSaveStateDot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #8da1ae;
}

.rocodeProjectSaveState[data-state='unsaved'] {
    color: #8a5b08;
}

.rocodeProjectSaveState[data-state='unsaved'] .rocodeProjectSaveStateDot {
    background: #d6921e;
}

.rocodeProjectSaveState[data-state='opened'] {
    color: #506f85;
}

.rocodeProjectSaveState[data-state='opened'] .rocodeProjectSaveStateDot {
    background: #6c91a6;
}

.rocodeProjectSaveState:is([data-state='saved'], [data-state='downloaded']) {
    color: #357356;
}

.rocodeProjectSaveState:is([data-state='saved'], [data-state='downloaded'])
    .rocodeProjectSaveStateDot {
    background: #3b9a6b;
}

.rocodeHeaderControls,
.rocodeHeaderCodingGroup,
.rocodeHeaderRunGroup,
.rocodeHeaderActionGroup,
.rocodeHeaderUtilityGroup {
    display: flex;
    align-items: center;
}

.rocodeHeaderControls {
    position: relative;
    z-index: 2;
    height: 100%;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 14px;
}

.rocodeHeaderCodingGroup,
.rocodeHeaderRunGroup,
.rocodeHeaderActionGroup,
.rocodeHeaderUtilityGroup {
    gap: 6px;
}

.rocodeHeaderActionGroup {
    gap: 8px;
    padding-left: 0;
    border-left: 0;
}

.rocodeHeaderUtilityGroup {
    height: var(--rocode-header-control-height);
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

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

.rocodeHeaderControl {
    display: flex;
    position: relative;
    height: var(--rocode-header-control-height);
    align-items: center;
}

.rocodeExecutionTargetControl {
    display: flex;
    height: var(--rocode-header-control-height);
    padding: 3px;
    border: 1px solid rgba(181, 198, 211, 0.82);
    border-radius: var(--rocode-header-control-radius);
    background: rgba(255, 255, 255, 0.42);
}

.rocodeExecutionTargetControl button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 64px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    color: var(--rocode-header-text-muted);
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.rocodeExecutionTargetControl button::before {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    background-color: currentColor;
    content: '';
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.rocodeExecutionTargetControl button[data-execution-target='live']::before {
    -webkit-mask-image: url('../assets/controls/live.svg');
    mask-image: url('../assets/controls/live.svg');
}

.rocodeExecutionTargetControl button[data-execution-target='onboard']::before {
    -webkit-mask-image: url('../assets/controls/on-board.svg');
    mask-image: url('../assets/controls/on-board.svg');
}

.rocodeExecutionTargetControl button:last-child {
    min-width: 84px;
}

.rocodeExecutionTargetControl button:hover {
    color: var(--rocode-header-text);
    background: rgba(255, 255, 255, 0.62);
}

.rocodeExecutionTargetControl button.is-active {
    color: var(--rocode-header-text);
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(37, 67, 91, 0.12);
    font-weight: 700;
}

.rocodeExecutionTargetControl button:focus-visible {
    outline: 2px solid var(--rocode-focus);
    outline-offset: 1px;
}

.rocodeHelpGroup {
    margin-left: 0;
    padding-left: 0;
}

.rocodeHeaderButton {
    display: inline-flex;
    position: relative;
    overflow: hidden;
    width: 42px;
    height: var(--rocode-header-control-height);
    align-items: center;
    padding: 0;
    border: 1px solid #cfdbe2;
    border-radius: var(--rocode-header-control-radius);
    color: var(--rocode-header-text);
    background-color: rgba(255, 255, 255, 0.88);
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease,
        box-shadow 140ms ease, transform 100ms ease;
}

.rocodeHeaderButton::before {
    position: absolute;
    top: 50%;
    left: 11px;
    width: 18px;
    height: 18px;
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    transform: translateY(-50%);
}

.rocodeHeaderButton::after {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 6px;
    height: 4px;
    content: '';
    background: url('../assets/controls/menu-arrow.png') no-repeat center / 6px 4px;
    filter: brightness(0.48) saturate(0.6);
    transform: translateY(-50%);
}

.rocodeHeaderButton:hover,
.rocodeHeaderButton.is-open {
    border-color: #adc2ce;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(34, 55, 72, 0.08);
}

.rocodeHeaderButton:active {
    box-shadow: none;
    transform: translateY(1px);
}

.rocodeHeaderButton.is-open::after {
    background-image: url('../assets/controls/menu-arrow-open.png');
}

.rocodeHeaderButton:focus-visible,
.rocodeHeaderMenu button:focus-visible,
.rocodeHeaderMenu a:focus-visible {
    outline: 2px solid var(--rocode-focus);
    outline-offset: 1px;
}

.rocodeHeaderButtonLabel {
    display: block;
    overflow: hidden;
    max-width: 146px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rocodeProgramModeControl {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    justify-content: center;
    padding: 0;
    border-color: rgba(167, 185, 199, 0.78);
    background-color: rgba(255, 255, 255, 0.56);
}

.rocodeProgramModeControl::before {
    left: 8px;
    width: 18px;
    height: 18px;
    background-color: transparent;
    background-size: 18px 18px;
}

.rocodeProgramModeControl[data-current-program-mode='block']::before {
    background-image: url('../assets/controls/block-mode.svg');
}

.rocodeProgramModeControl[data-current-program-mode='python']::before {
    background-image: url('../assets/controls/python-mode.svg');
}

.rocodeModeControlLabel {
    display: none;
}

.rocodeHeaderControl .rocodeHeaderMenu.rocodeProgramModeMenu {
    min-width: 190px;
}

html[data-execution-target='onboard'] #workspace .entryRunButtonWorkspace_w {
    display: none !important;
}

html[data-execution-target='onboard'] #workspace .entryAddButtonWorkspace_w {
    width: 100% !important;
    flex: 1 1 auto;
}

.rocodeModeCompatibilityHint {
    display: block;
    color: #6c5c3d;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.rocodeModeCompatibilityHint[hidden] {
    display: none;
}

.rocodeProgramModeMenu .rocodeModeCompatibilityHint {
    padding: 9px 10px 10px;
    border-top: 1px solid #e6ebee;
    background: #fff9ec;
}

.rocodeFileControl {
    width: auto;
    min-width: 78px;
    justify-content: flex-start;
    padding: 0 25px 0 36px;
}

.rocodeFileControl .rocodeHeaderButtonLabel {
    display: block;
}

.rocodeHeaderUtilityGroup .rocodeHeaderButton {
    height: var(--rocode-header-control-height);
    border-color: rgba(167, 185, 199, 0.72);
    border-radius: var(--rocode-header-control-radius);
    background-color: rgba(255, 255, 255, 0.46);
    box-shadow: none;
}

.rocodeHeaderUtilityGroup .rocodeHeaderButton:hover,
.rocodeHeaderUtilityGroup .rocodeHeaderButton.is-open {
    border-color: #c7d5dd;
    background-color: rgba(255, 255, 255, 0.78);
    box-shadow: none;
}

.rocodeFileControl::before {
    left: 8px;
    width: 18px;
    height: 18px;
    background-image: url('../assets/controls/file-menu.svg');
    background-size: 18px 18px;
}

.rocodeHardwareControl::before {
    display: block;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url('../assets/controls/mainboard-chip.svg') center / contain no-repeat;
    mask: url('../assets/controls/mainboard-chip.svg') center / contain no-repeat;
    transform: translate(-50%, -50%);
}

.rocodeHardwareControl {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    justify-content: center;
    padding: 0;
    border-color: #c9d6dd;
    color: var(--rocode-action);
    background-color: rgba(255, 255, 255, 0.68);
    box-shadow: none;
}

.rocodeHardwareControl:hover,
.rocodeHardwareControl.is-open {
    border-color: #aebfca;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(31, 55, 72, 0.09);
}

.rocodeHardwareControl::after {
    display: none;
}

.rocodeHardwareControlName,
.rocodeHardwareControlLabel {
    /* The button's localized accessible name and tooltip carry the full status. */
    display: none;
}

.rocodeHardwareStatusDot {
    display: grid;
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    right: 4px;
    bottom: 4px;
    width: 14px;
    height: 14px;
    place-items: center;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #738797;
    box-shadow: 0 0 0 1px rgba(57, 79, 92, 0.16);
    opacity: 1;
    transition: opacity 140ms ease;
}

.rocodeHardwareStatusDot::before {
    width: 5px;
    height: 2px;
    border-radius: 1px;
    background: #ffffff;
    content: '';
}

.rocodeHardwareControl[data-connected='true'] {
    border-color: #b8d2c0;
    background-color: #f8fcf8;
}

.rocodeHardwareControl[data-connected='true'] .rocodeHardwareStatusDot {
    background: #248643;
    opacity: 1;
}

.rocodeHardwareControl[data-connected='true'] .rocodeHardwareStatusDot::before {
    width: 5px;
    height: 3px;
    border: solid #ffffff;
    border-width: 0 0 1.5px 1.5px;
    border-radius: 0;
    background: transparent;
    transform: translateY(-1px) rotate(-45deg);
}

.rocodeHardwareControl[data-connection-state='connecting'] {
    border-color: #bfd5e1;
    background-color: #f5fbfe;
}

.rocodeHardwareControl[data-connection-state='updating'] {
    border-color: #bfd5e1;
    background-color: #f5fbfe;
}

.rocodeHardwareControl[data-connection-state='updating'] .rocodeHardwareStatusDot {
    background: #4e9fc7;
    opacity: 1;
    animation: rocodeMainboardStatusPulse 1.1s ease-in-out infinite;
}

.rocodeHardwareControl[data-connection-state='connecting'] .rocodeHardwareStatusDot {
    background: #4e9fc7;
    opacity: 1;
    animation: rocodeMainboardStatusPulse 1.1s ease-in-out infinite;
}

.rocodeHardwareControl[data-connection-state='connecting'] .rocodeHardwareStatusDot::before,
.rocodeHardwareControl[data-connection-state='updating'] .rocodeHardwareStatusDot::before {
    box-sizing: border-box;
    width: 7px;
    height: 7px;
    border: 1.5px solid #ffffff;
    border-right-color: transparent;
    border-radius: 50%;
    background: transparent;
    transform: none;
}

.rocodeHardwareControl[data-connection-state='error'] {
    border-color: #e5c0bd;
    background-color: #fff8f7;
}

.rocodeHardwareControl[data-connection-state='error'] .rocodeHardwareStatusDot {
    background: #c84a42;
    opacity: 1;
}

.rocodeHardwareControl[data-connection-state='error'] .rocodeHardwareStatusDot::before {
    width: 2px;
    height: 4px;
    transform: translateY(-1.5px);
}

.rocodeHardwareControl[data-connection-state='error'] .rocodeHardwareStatusDot::after {
    position: absolute;
    bottom: 1px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #ffffff;
    content: '';
}

.rocodeHelpControl {
    width: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 0;
}

.rocodeLanguageControl {
    width: 50px;
    min-width: 50px;
    justify-content: center;
    padding: 0 15px 0 5px;
}

.rocodeLanguageControl::before {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    color: var(--rocode-header-text);
    background: none;
    content: attr(data-language-label);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    transform: none;
}

.rocodeLanguageControl::after {
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
}

.rocodeHelpControl::before {
    position: absolute;
    left: 8px;
    width: 18px;
    height: 18px;
    color: var(--rocode-header-text);
    background: none;
    content: '?';
    filter: none;
    font-size: 18px;
    font-weight: 750;
    line-height: 18px;
    text-align: center;
}

.rocodeHelpControl::after {
    display: block;
    right: 7px;
}

.rocodeLanguageMenu {
    min-width: 182px;
}

.rocodeHeaderMenu {
    position: absolute;
    z-index: 310;
    top: calc(var(--rocode-header-control-height) + 6px);
    right: 0;
    min-width: 178px;
    overflow: hidden;
    padding: 6px;
    border: 1px solid #d9e3e8;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(27, 48, 67, 0.18),
        0 2px 8px rgba(27, 48, 67, 0.08);
}

.rocodeHeaderMenu[hidden] {
    display: none;
}

.rocodeHeaderMenu button,
.rocodeHeaderMenu a {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    color: #29475e;
    background: #ffffff;
    font-family: inherit;
    font-size: 13px;
    line-height: 18px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.rocodeHeaderMenu button:hover,
.rocodeHeaderMenu a:hover,
.rocodeHeaderMenu button.is-active {
    color: #245fc7;
    background: #eef4ff;
}

.rocodeHeaderMenu button.is-active::after {
    float: right;
    color: #3568e6;
    content: '\2713';
    font-weight: 700;
}

/* Keep compact header selections visually consistent with Entry's native menus. */
.rocodeHeaderMenu:not(.rocodeHardwareMenu) {
    min-width: 178px;
    padding: 0;
    border-color: #d8e1e6;
    border-radius: 6px;
    box-shadow: 0 3px 9px rgba(27, 48, 67, 0.16);
}

.rocodeHeaderMenu:not(.rocodeHardwareMenu) button,
.rocodeHeaderMenu:not(.rocodeHardwareMenu) a {
    min-height: 48px;
    padding: 12px 10px;
    border-bottom: 1px solid #e6ebee;
    border-radius: 0;
    color: #18232c;
    background: #ffffff;
    font-size: 13px;
    font-weight: 650;
    line-height: 23px;
}

.rocodeHeaderMenu:not(.rocodeHardwareMenu) > :last-child {
    border-bottom: 0;
}

/* A consistent English A–Z list, including inside the Arabic shell. */
.rocodeAppHeader:has(.rocodeLanguageMenu:not([hidden])) {
    /* Entry's palette resize handle is at 301; keep open options clickable. */
    z-index: 302;
}

.rocodeHeaderMenu.rocodeLanguageMenu:not(.rocodeHardwareMenu) {
    width: min(368px, calc(100vw - 32px));
    min-width: 0;
    max-height: min(640px, calc(100dvh - 80px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    direction: ltr;
}

.rocodeHeaderMenu.rocodeLanguageMenu:not(.rocodeHardwareMenu) button {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 16px;
    align-items: center;
    column-gap: 10px;
    direction: ltr;
    text-align: left;
    white-space: normal;
}

.rocodeHeaderMenu.rocodeLanguageMenu button.is-active::after {
    grid-column: 3;
    float: none;
    justify-self: center;
}

.rocodeLanguageFlag {
    display: block;
    width: 24px;
    height: 18px;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(27, 48, 67, 0.14);
}

.rocodeLanguageOptionLabel {
    min-width: 0;
    overflow-wrap: anywhere;
    unicode-bidi: isolate;
}

.rocodeLanguageOptionLabel bdi[lang='km'] {
    font-family: 'Leelawadee UI', 'Khmer UI', sans-serif;
}

.rocodeLanguageOptionLabel bdi[lang='th'] {
    font-family: Tahoma, sans-serif;
}

.rocodeHeaderMenu:not(.rocodeHardwareMenu) button:hover,
.rocodeHeaderMenu:not(.rocodeHardwareMenu) a:hover,
.rocodeHeaderMenu:not(.rocodeHardwareMenu) button.is-active {
    color: #4f80ff;
    background: #edf6fb;
}

.rocodeHeaderMenu:not(.rocodeHardwareMenu) button:active,
.rocodeHeaderMenu:not(.rocodeHardwareMenu) a:active {
    background: #e4f0f7;
}

.rocodeHeaderControl .rocodeHeaderMenu.rocodeFileMenu {
    min-width: 260px;
    width: max-content;
    max-width: calc(100vw - 24px);
}

.rocodeZoomControl {
    width: 92px;
    min-width: 92px;
    padding: 0 18px 0 32px;
    font-variant-numeric: tabular-nums;
}

.rocodeZoomControl::before {
    left: 9px;
    background-image: url('../assets/controls/app-zoom.svg');
}

.rocodeZoomControl::after {
    right: 7px;
}

.rocodeZoomGroup[hidden] {
    display: none;
}

.rocodeHeaderControl .rocodeHeaderMenu.rocodeZoomMenu {
    width: 208px;
    max-width: calc(100vw - 24px);
    padding: 4px;
    border-radius: 9px;
}

.rocodeInterfaceSizeLabel {
    display: block;
    padding: 8px 10px;
    color: #526b7a;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

.rocodeInterfaceSizeOptions {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rocodeHeaderMenu:not(.rocodeHardwareMenu) .rocodeInterfaceSizeOptions button {
    position: relative;
    min-height: 40px;
    padding: 9px 34px 9px 10px;
    border: 0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 650;
    line-height: 22px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.rocodeHeaderMenu:not(.rocodeHardwareMenu)
    .rocodeInterfaceSizeOptions
    button.is-active {
    color: #245fc7;
    background: #eaf1ff;
}

.rocodeInterfaceSizeOptions button.is-active::after {
    position: absolute;
    top: 50%;
    right: 12px;
    float: none;
    transform: translateY(-50%);
}

[data-rocode-block-zoom-control] {
    outline: none;
}

[data-rocode-block-zoom-control]:focus-visible {
    outline: 3px solid #245fc7;
    outline-offset: 2px;
}

/* Block zoom and memos share the tab row instead of floating over the code. */
#workspace .rocodeBlockToolbar.entryPlaygroundButtonTabWorkspace {
    top: 46px;
    right: 8px;
    height: 36px;
    align-items: center;
    gap: 6px;
    background: transparent;
}

#workspace .rocodeBlockToolbar.entryPlaygroundButtonTabWorkspace.entryCode {
    display: flex !important;
}

/* When the editor is very narrow, keep all five controls together on a
   reserved row instead of covering the Shape/Sound/Attribute tabs. */
#workspace .rocodeCompactBlockToolbar .rocodeBlockToolbar {
    top: 84px;
}

#workspace .rocodeCompactBlockToolbar > .entryPlaygroundCodeWorkspace {
    top: 122px;
}

.rocodeBlockZoomTools {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 2px;
    padding-right: 8px;
    border-right: 1px solid #d8e2eb;
}

.rocodeBlockZoomTools[hidden],
[data-rocode-legacy-block-zoom] {
    display: none !important;
}

#workspace .rocodeBlockToolbar :is(.rocodeBlockZoomButton, .entryPlaygroundCommentButtonWorkspace) {
    display: flex;
    float: none;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid #c8d4e7;
    border-radius: 8px;
    color: var(--rocode-action);
    background: #fff;
    box-shadow: none;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

#workspace .rocodeBlockToolbar :is(.rocodeBlockZoomButton, .entryPlaygroundCommentButtonWorkspace):hover {
    border-color: #9ebcf5;
    color: var(--rocode-action-hover);
    background: var(--rocode-action-soft);
}

#workspace .rocodeBlockToolbar :is(.rocodeBlockZoomButton, .entryPlaygroundCommentButtonWorkspace):active {
    border-color: var(--rocode-action);
    background: #e0eaff;
}

#workspace .rocodeBlockToolbar .entryPlaygroundCommentButtonWorkspace:focus-visible {
    outline: 3px solid #245fc7;
    outline-offset: 2px;
}

#workspace .rocodeBlockToolbar .rocodeBlockZoomButton:disabled {
    color: #9caebb;
    border-color: #dce4ed;
    background: #f5f8fb;
    cursor: default;
}

.rocodeBlockZoomButton svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#workspace .rocodeBlockToolbar .entryPlaygroundCommentButtonWorkspace::before {
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url('../assets/controls/memo.svg') center / contain no-repeat;
    mask: url('../assets/controls/memo.svg') center / contain no-repeat;
    content: '';
}

#workspace .rocodeBlockToolbar .addComment::before {
    -webkit-mask-image: url('../assets/controls/memo-add.svg');
    mask-image: url('../assets/controls/memo-add.svg');
}

#workspace .rocodeBlockToolbar .showComment:not(.enabled) {
    color: #7d92a4;
    background: #f5f8fb;
}

.rocodeFileMenu button {
    display: flex;
    position: relative;
    align-items: center;
    padding-left: 42px !important;
}

.rocodeFileMenu button[data-shortcut]::after {
    content: attr(data-shortcut);
    margin-inline-start: auto;
    padding-inline-start: 18px;
    font-size: 11px;
    color: #718b9a;
    direction: ltr;
    unicode-bidi: isolate;
}

.rocodeFileMenu button::before {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 20px;
    height: 20px;
    background-color: #526f82;
    content: '';
    transform: translateY(-50%);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.rocodeFileMenu button:hover::before,
.rocodeFileMenu button:focus-visible::before {
    background-color: #4f80ff;
}

.rocodeFileMenu button:disabled {
    color: #93a2ac !important;
    background: #ffffff !important;
    cursor: wait;
}

.rocodeFileMenu button:disabled::before {
    background-color: #9dabb4;
}

.rocodeFileMenuNew::before {
    -webkit-mask-image: url('../assets/controls/new-project.svg');
    mask-image: url('../assets/controls/new-project.svg');
}

.rocodeFileMenuOpen::before {
    -webkit-mask-image: url('../assets/controls/open-project.svg');
    mask-image: url('../assets/controls/open-project.svg');
}

.rocodeFileMenuSave::before {
    -webkit-mask-image: url('../assets/controls/save-project.svg');
    mask-image: url('../assets/controls/save-project.svg');
}

.rocodeFileMenuSaveAs::before {
    -webkit-mask-image: url('../assets/controls/save-as.svg');
    mask-image: url('../assets/controls/save-as.svg');
}

.rocodeHardwareMenu {
    width: 370px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 58px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
}

.rocodeHardwareMenu [hidden] {
    display: none;
}

.rocodeHardwareStatus,
.rocodeHardwareHint,
.rocodeHardwareModeSummary {
    padding: 9px 14px;
    color: #5d6c5e;
    font-size: 12px;
    line-height: 17px;
}

.rocodeHardwareModeSummary {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 10px;
    border-bottom: 1px solid #e6ece3;
    background: #f7faf5;
}

.rocodeHardwareModeSummary::before {
    width: 26px;
    height: 26px;
    align-self: center;
    grid-row: 1 / 3;
    border-radius: 50%;
    background-color: #4d7f32;
    content: '';
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 16px;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 16px;
}

.rocodeHardwareModeSummary[data-execution-target='live']::before {
    -webkit-mask-image: url('../assets/controls/live.svg');
    mask-image: url('../assets/controls/live.svg');
}

.rocodeHardwareModeSummary[data-execution-target='onboard']::before {
    -webkit-mask-image: url('../assets/controls/on-board.svg');
    mask-image: url('../assets/controls/on-board.svg');
}

.rocodeHardwareModeSummary strong,
.rocodeHardwareModeSummary span {
    display: block;
    grid-column: 2;
}

.rocodeHardwareModeSummary strong {
    color: #2d4630;
    font-size: 13px;
}

.rocodeHardwareMenu button small {
    display: block;
    color: #6b786c;
    font-size: 11px;
    line-height: 15px;
}

.rocodeHardwareMenu button[data-hardware-action] {
    position: relative;
    min-height: 52px;
    padding: 8px 14px 8px 50px;
    white-space: normal;
}

.rocodeHardwareMenu button[data-onboard-action] {
    position: relative;
    min-height: 54px;
    padding: 8px 14px 8px 50px;
    color: #ffffff;
    background: #4d9c31;
    white-space: normal;
}

.rocodeHardwareMenu button[data-onboard-action]:hover {
    color: #ffffff;
    background: #3f8428;
}

.rocodeHardwareMenu button[data-onboard-action]::before {
    position: absolute;
    top: 17px;
    left: 18px;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    content: '';
    -webkit-mask: url('../assets/controls/on-board.svg') center / contain no-repeat;
    mask: url('../assets/controls/on-board.svg') center / contain no-repeat;
}

.rocodeHardwareMenu button[data-onboard-action='check']::before {
    top: 18px;
    left: 20px;
    width: 15px;
    height: 9px;
    border-bottom: 3px solid currentColor;
    border-left: 3px solid currentColor;
    background: transparent;
    transform: rotate(-45deg);
    -webkit-mask: none;
    mask: none;
}

.rocodeHardwareMenu button[data-onboard-action='restore-live'] {
    color: #3d6f2d;
    background: #eef7e9;
    border-top: 1px solid #dce9d5;
}

.rocodeHardwareMenu button[data-onboard-action='restore-live']:hover {
    color: #315d24;
    background: #e2f1da;
}

.rocodeHardwareMenu button[data-onboard-action='restore-live']::before {
    top: 16px;
    left: 19px;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
    background: transparent;
    transform: rotate(-35deg);
    -webkit-mask: none;
    mask: none;
}

.rocodeHardwareMenu button[data-onboard-action='restore-live']::after {
    position: absolute;
    top: 15px;
    left: 17px;
    border-top: 4px solid transparent;
    border-right: 6px solid currentColor;
    border-bottom: 4px solid transparent;
    content: '';
    transform: rotate(25deg);
}

.rocodeHardwareMenu button[data-onboard-action='restore-live']:disabled {
    color: #788875;
    background: #edf0eb;
}

.rocodeHardwareMenu button[data-onboard-action] small {
    color: #e2f5d8;
}

.rocodeHardwareMenu button[data-onboard-action]:disabled {
    color: #ffffff;
    background: #7fae6c;
}

.rocodeOnBoardStatus {
    padding: 10px 14px;
    border-bottom: 1px solid #e6ece3;
    color: #375c28;
    background: #f1f9ec;
    font-size: 12px;
    line-height: 17px;
}

.rocodeOnBoardCompatibility {
    display: grid;
    gap: 3px;
    padding: 10px 14px;
    border-bottom: 1px solid #e6ece3;
    color: #365a2c;
    background: #f7fbf4;
    font-size: 12px;
    line-height: 16px;
}

.rocodeOnBoardCompatibility[hidden] {
    display: none;
}

.rocodeOnBoardCompatibility strong {
    color: #2d7132;
    font-size: 12px;
}

.rocodeOnBoardCompatibility small {
    color: #6a7568;
    font-size: 11px;
    line-height: 15px;
}

.rocodeOnBoardStatus[data-state='error'] {
    color: #8f302b;
    background: #fff1ef;
}

.rocodeOnBoardStatus[data-state='checking'],
.rocodeOnBoardStatus[data-state='compiling'],
.rocodeOnBoardStatus[data-state='memoryWarning'],
.rocodeOnBoardStatus[data-state='waitingForBoard'],
.rocodeOnBoardStatus[data-state='uploading'] {
    color: #315e7a;
    background: #eef8fd;
}

.rocodeOnBoardStatus[data-state='restoringLive'] {
    color: #315e7a;
    background: #eef8fd;
}

.rocodeOnBoardStatus[data-state='complete'] {
    color: #285f1b;
    background: #eaf8e1;
    font-weight: 700;
}

.rocodeHardwareMenu button[data-hardware-action]::before {
    position: absolute;
    top: 15px;
    left: 17px;
    width: 20px;
    height: 20px;
    content: '';
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.rocodeHardwareMenu button[data-hardware-action='connect-usb']::before {
    background-image: url('../assets/controls/usb.svg?v=2');
}

.rocodeHardwareMenu button[data-hardware-action='connect-bluetooth']::before {
    background-image: url('../assets/controls/bluetooth.svg');
}

.rocodeHardwareMenu button[data-hardware-action='disconnect'] {
    min-height: 44px;
    color: #8f302b;
}

.rocodeHardwareMenu button[data-hardware-action='disconnect']::before {
    top: 12px;
    background-image: url('../assets/controls/disconnect.svg');
}

.rocodeHardwareMenu button:disabled {
    color: #7e877f;
    background: #f4f6f3;
    cursor: not-allowed;
}

.rocodeHardwareMenu button:disabled::before {
    opacity: 0.46;
}

.rocodeHardwareMenu button:disabled small {
    color: #8a928b;
}

.rocodeHardwareStatus {
    position: relative;
    padding-left: 34px;
    border-bottom: 1px solid #e6ece3;
    color: #765b18;
    background: #fff9e8;
    font-weight: 700;
}

.rocodeHardwareStatus::before {
    position: absolute;
    top: 14px;
    left: 15px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    content: '';
}

.rocodeHardwareStatus[data-state='connected'] {
    color: #285f1b;
    background: #eef8e7;
}

.rocodeHardwareStatus[data-state='error'] {
    color: #9d302a;
    background: #fff0ef;
}

.rocodeHardwareStatus[data-state='connecting'] {
    color: #2b5f82;
    background: #edf7fd;
}

.rocodeHardwareStatus[data-state='updating'] {
    color: #2b5f82;
    background: #edf7fd;
}

.rocodeHardwareStatus[data-state='warning'] {
    color: #765b18;
    background: #fff9e8;
}

.rocodeHardwareHint {
    border-top: 1px solid #e6ece3;
}

.rocodeLiveConnectionPanel[hidden],
.rocodeOnBoardWizard[hidden],
.rocodeMainboardRecovery[hidden],
.rocodeOnBoardProgress[hidden] {
    display: none;
}

.rocodeOnBoardWizardIntro {
    display: grid;
    gap: 2px;
    padding: 13px 16px 11px;
    border-bottom: 1px solid #dfe8da;
    background: #ffffff;
}

.rocodeOnBoardWizardIntro strong {
    color: #285f1b;
    font-size: 15px;
    line-height: 20px;
}

.rocodeOnBoardWizardIntro span {
    color: #667166;
    font-size: 12px;
    line-height: 17px;
}

.rocodeOnBoardWizard .rocodeOnBoardCompatibility {
    display: block;
    padding: 0;
    color: #536254;
    background: #f8faf7;
}

.rocodeOnBoardCompatibility summary {
    position: relative;
    padding: 9px 36px 9px 16px;
    color: #3d6533;
    font-size: 12px;
    font-weight: 700;
    line-height: 17px;
    list-style: none;
    cursor: pointer;
}

.rocodeOnBoardCompatibility summary::-webkit-details-marker {
    display: none;
}

.rocodeOnBoardCompatibility summary::after {
    position: absolute;
    top: 9px;
    right: 16px;
    content: '+';
    font-size: 16px;
    font-weight: 500;
}

.rocodeOnBoardCompatibility[open] summary::after {
    content: '\2212';
}

.rocodeOnBoardCompatibility > span,
.rocodeOnBoardCompatibility > small {
    display: block;
    padding: 0 16px;
}

.rocodeOnBoardCompatibility > span {
    padding-top: 1px;
    color: #365a2c;
    font-size: 12px;
    line-height: 17px;
}

.rocodeOnBoardCompatibility > small {
    padding-top: 4px;
    padding-bottom: 11px;
}

.rocodeOnBoardSteps {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 12px 12px 11px;
    background: #ffffff;
    list-style: none;
}

.rocodeOnBoardSteps li {
    position: relative;
    margin: 0;
}

.rocodeHardwareMenu .rocodeOnBoardSteps button {
    min-height: 61px;
    padding: 10px 14px 10px 58px;
    border: 1px solid #dfe6dc;
    border-radius: 7px;
    color: #435044;
    background: #ffffff;
    box-shadow: none;
    white-space: normal;
}

.rocodeHardwareMenu .rocodeOnBoardSteps button::before,
.rocodeHardwareMenu .rocodeOnBoardSteps button::after {
    display: none;
}

.rocodeOnBoardSteps button > span:not(.rocodeOnBoardStepNumber) {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
}

.rocodeOnBoardStepNumber {
    position: absolute;
    top: 14px;
    left: 15px;
    display: grid;
    width: 30px;
    height: 30px;
    align-items: center;
    border: 2px solid #b9c4b7;
    border-radius: 50%;
    color: #687468;
    background: #ffffff;
    font-size: 13px;
    font-weight: 800;
    line-height: 26px;
    text-align: center;
}

.rocodeHardwareMenu .rocodeOnBoardSteps button small {
    margin-top: 1px;
    color: #707b70;
}

.rocodeOnBoardSteps li[data-state='current'] button {
    border-color: #4d9c31;
    color: #285f1b;
    background: #f3faef;
    box-shadow: 0 0 0 1px rgba(77, 156, 49, 0.08);
}

.rocodeOnBoardSteps li[data-state='current'] .rocodeOnBoardStepNumber {
    border-color: #4d9c31;
    color: #ffffff;
    background: #4d9c31;
}

.rocodeOnBoardSteps li[data-state='active'] button {
    border-color: #4e91bd;
    color: #244f6c;
    background: #edf7fd;
}

.rocodeOnBoardSteps li[data-state='active'] .rocodeOnBoardStepNumber {
    border-color: #4e91bd;
    color: transparent;
    background: #4e91bd;
}

.rocodeOnBoardSteps li[data-state='active'] .rocodeOnBoardStepNumber::after {
    position: absolute;
    inset: 7px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    content: '';
    animation: rocodeMainboardSpin 0.8s linear infinite;
}

.rocodeOnBoardSteps li[data-state='complete'] button,
.rocodeOnBoardSteps li[data-state='complete'] button:disabled {
    border-color: #bcd8af;
    color: #315f24;
    background: #f1f8ed;
    cursor: pointer;
}

.rocodeOnBoardSteps li[data-state='complete'] .rocodeOnBoardStepNumber {
    border-color: #4d9c31;
    color: transparent;
    background: #4d9c31;
}

.rocodeOnBoardSteps li[data-state='complete'] .rocodeOnBoardStepNumber::after {
    position: absolute;
    top: 6px;
    left: 8px;
    width: 10px;
    height: 6px;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    content: '';
    transform: rotate(-45deg);
}

.rocodeOnBoardSteps li[data-state='locked'] button,
.rocodeOnBoardSteps li[data-state='locked'] button:disabled {
    border-color: #e3e7e1;
    color: #858e85;
    background: #f5f7f4;
    cursor: not-allowed;
}

.rocodeOnBoardSteps li[data-state='error'] button {
    border-color: #e1aaa5;
    color: #8f302b;
    background: #fff4f2;
}

.rocodeOnBoardSteps li[data-state='error'] .rocodeOnBoardStepNumber {
    border-color: #b84d45;
    color: #ffffff;
    background: #b84d45;
}

.rocodeOnBoardProgress {
    display: grid;
    gap: 9px;
    padding: 13px 16px;
    border-top: 1px solid #d8e8f2;
    border-bottom: 1px solid #d8e8f2;
    color: #315e7a;
    background: #eef8fd;
}

.rocodeOnBoardProgress strong {
    font-size: 13px;
    line-height: 18px;
}

.rocodeOnBoardProgressTrack {
    position: relative;
    flex: 1;
    height: 7px;
    overflow: hidden;
    border-radius: 99px;
    background: #d6e9f4;
}

.rocodeOnBoardProgressTrack span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: var(--rocode-action);
    transition: width 420ms ease, background-color 180ms ease;
}

.rocodeOnBoardProgress[data-stage='complete'] .rocodeOnBoardProgressTrack span {
    width: 100%;
    animation: none;
    background: #4d9c31;
}

.rocodeOnBoardProgressLine {
    display: flex;
    gap: 12px;
    align-items: center;
}

.rocodeOnBoardProgressLine > strong {
    width: 42px;
    color: #245fc7;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    line-height: 18px;
    text-align: right;
}

.rocodeOnBoardProgress[data-stage='complete'] .rocodeOnBoardProgressLine > strong {
    color: #397a28;
}

.rocodeOnBoardProgressPhases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    color: #76848c;
    font-size: 10px;
    line-height: 13px;
    list-style: none;
}

.rocodeOnBoardProgressPhases li::before {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: '';
}

.rocodeOnBoardProgressPhases li[data-state='active'] {
    color: var(--rocode-action);
    font-weight: 700;
}

.rocodeOnBoardProgressPhases li[data-state='active']::before {
    background: currentColor;
}

.rocodeOnBoardProgressPhases li[data-state='complete'] {
    color: var(--rocode-action);
}

.rocodeOnBoardProgressPhases li[data-state='complete']::before {
    border-color: var(--rocode-action);
    background: var(--rocode-action);
}

.rocodeOnBoardProgress small {
    color: #496d82;
    font-size: 11px;
    line-height: 15px;
}

.rocodeOnBoardWizard .rocodeOnBoardStatus {
    margin: 0;
    border-bottom: 1px solid #e6ece3;
}

.rocodeOnBoardWizard .rocodeHardwareHint {
    border-top: 0;
    color: #647064;
    background: #ffffff;
}

.rocodeMainboardRecovery {
    border-top: 1px solid #dfe6dc;
    background: #f8faf7;
}

.rocodeMainboardRecoveryHeading {
    display: grid;
    gap: 1px;
    padding: 10px 14px 7px;
}

.rocodeMainboardRecoveryHeading strong {
    color: #526052;
    font-size: 11px;
    line-height: 15px;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.rocodeMainboardRecoveryHeading span {
    color: #748074;
    font-size: 11px;
    line-height: 15px;
}

.rocodeHardwareMenu .rocodeMainboardRecovery button[data-onboard-action='restore-live'] {
    min-height: 52px;
    border-top: 0;
    color: #3d6f2d;
    background: #f8faf7;
}

.rocodeLiveConnectionIntro {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 15px 16px 12px;
    border-bottom: 1px solid #d6e9f4;
    background: #ffffff;
}

.rocodeLiveConnectionIntroIcon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 6px;
    background: var(--rocode-action) url('../assets/controls/mainboard-chip.svg') center / 20px no-repeat;
}

.rocodeLiveConnectionIntro strong,
.rocodeLiveConnectionIntro small {
    display: block;
}

.rocodeLiveConnectionIntro strong {
    color: #2c313d;
    font-size: 15px;
    line-height: 20px;
}

.rocodeLiveConnectionIntro small {
    margin-top: 1px;
    color: #728997;
    font-size: 11px;
    line-height: 16px;
}

.rocodeLiveConnectionChoices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 13px;
}

.rocodeHardwareMenu .rocodeLiveConnectionChoices button[data-hardware-action] {
    display: grid;
    min-height: 112px;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 12px 8px;
    border: 1px solid #aac5d5;
    border-radius: 6px;
    color: #4d616e;
    background: #ffffff;
    text-align: center;
}

.rocodeHardwareMenu .rocodeLiveConnectionChoices button[data-hardware-action]:hover {
    border-color: var(--rocode-action);
    color: var(--rocode-action);
    background: var(--rocode-action-soft);
}

.rocodeHardwareMenu .rocodeLiveConnectionChoices button[data-hardware-action]::before {
    display: none;
}

.rocodeConnectionChoiceIcon {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    background: transparent;
}

.rocodeConnectionChoiceIcon::before {
    position: absolute;
    inset: 9px;
    background-color: var(--rocode-action);
    content: '';
}

.rocodeConnectionChoiceUsb::before {
    -webkit-mask: url('../assets/controls/usb.svg?v=2') center / contain no-repeat;
    mask: url('../assets/controls/usb.svg?v=2') center / contain no-repeat;
}

.rocodeConnectionChoiceBluetooth::before {
    -webkit-mask: url('../assets/controls/bluetooth.svg') center / contain no-repeat;
    mask: url('../assets/controls/bluetooth.svg') center / contain no-repeat;
}

.rocodeHardwareMenu .rocodeDisconnectAction[data-hardware-action] {
    width: calc(100% - 26px);
    margin: 12px 13px 4px;
    padding-left: 44px;
    border: 1px solid #efc8c4;
    border-radius: 9px;
    background: #fff7f6;
}

.rocodeMainboardRecovery {
    padding: 0;
}

.rocodeMainboardRecovery summary {
    padding: 10px 14px;
    color: #657165;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.rocodeMainboardRecovery p {
    margin: 0;
    padding: 0 14px 7px;
    color: #748074;
    font-size: 11px;
}

.rocodeHardwareMenu .rocodeMainboardRecovery button[data-onboard-action='restore-live'] {
    width: calc(100% - 18px);
    margin: 0 9px 9px;
    border: 1px solid #aac5d5;
    border-radius: 4px;
    color: var(--rocode-action);
    background: #ffffff;
}

.rocodeHardwareMenu .rocodeMainboardRecovery button[data-onboard-action='restore-live']:hover {
    border-color: var(--rocode-action);
    color: var(--rocode-action-hover);
    background: var(--rocode-action-soft);
}

.rocodeSerialPortPicker {
    width: min(390px, 100%);
    margin: 0 0 14px;
    overflow: hidden;
    border: 1px solid #c6dae6;
    border-radius: 10px;
    color: #4d616e;
    background: #ffffff;
    text-align: left;
}

.rocodeLiveConnectionPanel > .rocodeSerialPortPicker {
    width: auto;
    margin: 12px 13px;
}

.rocodeBluetoothDevicePicker {
    background: #ffffff;
}

.rocodeSerialPickerIcon.rocodeBluetoothPickerIcon {
    background-image: url('../assets/controls/bluetooth.svg');
}

.rocodeConnectionPickerActions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
}

.rocodeConnectionPickerActions button,
.rocodeHardwareMenu .rocodeConnectionPickerActions button {
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid #c6dae6;
    border-radius: 7px;
    color: #36576e;
    background: #ffffff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
}

.rocodeConnectionPickerActions .rocodeConnectionRetry,
.rocodeHardwareMenu .rocodeConnectionPickerActions .rocodeConnectionRetry {
    border: 1px solid var(--rocode-action);
    color: #ffffff;
    background: var(--rocode-action);
}

.rocodeConnectionPickerActions .rocodeConnectionRetry:hover {
    border-color: var(--rocode-action-hover);
    background: var(--rocode-action-hover);
}

.rocodeSerialPortPicker > header {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 16px 12px 8px;
}

.rocodeSerialPortPicker header strong {
    color: #36576e;
    font-size: 13px;
    line-height: 20px;
}

.rocodeSerialPickerIcon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: transparent url('../assets/controls/usb.svg?v=2') center / 22px no-repeat;
}

.rocodeSerialPortList {
    display: grid;
    gap: 7px;
    padding: 8px 12px 0;
}

.rocodeSerialPortList:empty {
    display: none;
}

.rocodeSerialPortChoice,
.rocodeHardwareMenu .rocodeSerialPortChoice {
    position: relative;
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 11px 36px 11px 14px;
    border: 1px solid #c6dae6;
    border-radius: 7px;
    color: #4d616e;
    background: #ffffff;
    font-family: inherit;
    text-align: left;
    white-space: normal;
    cursor: pointer;
}

.rocodeSerialPortChoice::after,
.rocodeHardwareMenu .rocodeSerialPortChoice::after {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: '';
    transform: translateY(-50%) rotate(45deg);
}

.rocodeSerialPortChoice:hover,
.rocodeHardwareMenu .rocodeSerialPortChoice:hover {
    border-color: var(--rocode-action);
    color: var(--rocode-action);
    background: var(--rocode-action-soft);
}

.rocodeSerialPortChoice strong {
    display: block;
    overflow: hidden;
    font-size: 13px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rocodeSerialPortPicker > p {
    margin: 0;
    padding: 8px 16px 0;
    color: #587184;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.rocodeOnBoardWizardModal button:focus-visible,
.rocodeSerialPortPicker button:focus-visible {
    outline: 3px solid var(--rocode-focus);
    outline-offset: 2px;
}

.rocodeOnBoardWizardModal[hidden],
.rocodeOnBoardWizardPage[hidden] {
    display: none !important;
}

.rocodeOnBoardWizardModal {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    font-family: var(--rocode-font-family);
}

.rocodeOnBoardWizardBackdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    background: rgba(59, 59, 59, 0.7);
    cursor: default;
}

.rocodeOnBoardWizardDialog {
    position: relative;
    display: grid;
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: hidden;
    border: 1px solid #aac5d5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.19);
}

.rocodeOnBoardWizardHeader {
    display: grid;
    grid-template-columns: 40px 1fr 36px;
    gap: 11px;
    align-items: center;
    padding: 17px 18px 14px;
    border-bottom: 1px solid #d6e9f4;
    background: #ffffff;
}

.rocodeOnBoardWizardBadge {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--rocode-action);
}

.rocodeOnBoardWizardBadge::before {
    position: absolute;
    inset: 8px;
    background: #ffffff;
    content: '';
    -webkit-mask: url('../assets/controls/on-board.svg') center / contain no-repeat;
    mask: url('../assets/controls/on-board.svg') center / contain no-repeat;
}

.rocodeOnBoardWizardHeader h1 {
    margin: 0;
}

.rocodeOnBoardWizardHeader h1 {
    color: #2c313d;
    font-size: 18px;
    line-height: 25px;
}

.rocodeOnBoardWizardClose {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border-radius: 4px;
    color: #728997;
    background: transparent;
    font-size: 26px;
    line-height: 34px;
    cursor: pointer;
}

.rocodeOnBoardWizardClose:hover {
    color: var(--rocode-action);
    background: var(--rocode-action-soft);
}

.rocodeOnBoardWizardSteps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 13px 42px 9px;
    background: #ffffff;
    list-style: none;
}

.rocodeOnBoardWizardSteps li {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 3px;
    color: #728997;
    font-size: 10px;
    font-weight: 700;
}

.rocodeOnBoardWizardSteps li:not(:last-child)::after {
    position: absolute;
    z-index: 0;
    top: 13px;
    left: calc(50% + 16px);
    width: calc(100% - 32px);
    height: 3px;
    border-radius: 3px;
    background: #d6e9f4;
    content: '';
}

.rocodeOnBoardWizardSteps li[data-state='complete']:not(:last-child)::after {
    background: var(--rocode-action);
}

.rocodeOnBoardWizardSteps li span {
    position: relative;
    z-index: 1;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 2px solid #aac5d5;
    border-radius: 50%;
    color: #728997;
    background: #ffffff;
    font-size: 12px;
}

.rocodeOnBoardWizardSteps li[data-state='current'] {
    color: var(--rocode-action);
}

.rocodeOnBoardWizardSteps li[data-state='current'] span {
    border-color: var(--rocode-action);
    color: #ffffff;
    background: var(--rocode-action);
}

.rocodeOnBoardWizardSteps li[data-state='complete'] {
    color: var(--rocode-action);
}

.rocodeOnBoardWizardSteps li[data-state='complete'] span {
    border-color: var(--rocode-action);
    color: transparent;
    background: var(--rocode-action);
}

.rocodeOnBoardWizardSteps li[data-state='complete'] span::after {
    position: absolute;
    width: 10px;
    height: 6px;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    content: '';
    transform: rotate(-45deg);
}

.rocodeOnBoardWizardBody {
    overflow-y: auto;
    padding: 6px 38px 28px;
}

.rocodeOnBoardWizardPage {
    display: grid;
    justify-items: center;
    text-align: center;
}

.rocodeOnBoardWizardPage h2 {
    margin: 12px 0 4px;
    color: #2c313d;
    font-size: 20px;
    line-height: 28px;
}

.rocodeOnBoardWizardPage > p {
    max-width: 390px;
    margin: 0 0 14px;
    color: #4d616e;
    font-size: 13px;
    line-height: 19px;
}

.rocodeWizardPicture {
    position: relative;
    width: 270px;
    height: 118px;
    margin-top: 5px;
    overflow: hidden;
    border: 1px solid #d6e9f4;
    border-radius: 6px;
    background: #ecf8ff;
}

.rocodeWizardPictureCheck {
    width: min(320px, 100%);
    height: 142px;
}

.rocodeWizardPictureCheck img {
    position: absolute;
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    object-fit: contain;
    object-position: center;
}

.rocodeWizardCheckmark {
    position: absolute;
    top: 42px;
    right: 55px;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--rocode-action);
    box-shadow: none;
    font-size: 33px;
    font-weight: 800;
}

.rocodeWizardComputer,
.rocodeWizardMainboard {
    position: absolute;
    top: 29px;
    width: 62px;
    height: 54px;
    border: 5px solid #4e6f86;
    border-radius: 7px;
    background: #dff2fb;
}

.rocodeWizardComputer {
    left: 34px;
}

.rocodeWizardComputer::after {
    position: absolute;
    right: 9px;
    bottom: -12px;
    left: 9px;
    height: 5px;
    border-radius: 4px;
    background: #4e6f86;
    content: '';
}

.rocodeWizardMainboard {
    top: 30px;
    right: 31px;
    width: 67px;
    border-color: var(--rocode-action);
    background: #bdd1ff url('../assets/controls/on-board.svg') center / 25px no-repeat;
}

.rocodeWizardCable {
    position: absolute;
    top: 57px;
    left: 93px;
    width: 108px;
    height: 35px;
}

.rocodeWizardCable::before {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 26px);
    height: 26px;
    border-top: 5px solid #657d8c;
    border-right: 5px solid #657d8c;
    border-radius: 0 15px 0 0;
    content: '';
}

.rocodeWizardCable::after {
    position: absolute;
    right: 0;
    bottom: 4px;
    width: 28px;
    height: 5px;
    border-radius: 0 4px 4px 0;
    background: #657d8c;
    content: '';
}

.rocodeWizardCable i {
    position: absolute;
    z-index: 1;
    right: -2px;
    bottom: 0;
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    border: 3px solid #657d8c;
    border-radius: 2px;
    background: #dff2fb;
}

.rocodeWizardProgramCard {
    position: absolute;
    top: 30px;
    left: 42px;
    display: grid;
    width: 62px;
    height: 58px;
    place-items: center;
    border: 3px solid #11a8ba;
    border-radius: 10px;
    color: #078a98;
    background: #d8f5f7;
    font-size: 30px;
}

.rocodeWizardUploadArrow {
    position: absolute;
    top: 44px;
    left: 119px;
    color: var(--rocode-action);
    font-size: 38px;
    font-weight: 800;
}

.rocodeWizardPictureUpload .rocodeWizardMainboard {
    right: 35px;
}

.rocodeWizardTransferPicture {
    width: min(380px, 100%);
    height: 132px;
}

.rocodeWizardTransferProgram {
    position: absolute;
    top: 28px;
    left: 34px;
    display: grid;
    width: 82px;
    height: 76px;
    align-content: center;
    padding-left: 13px;
    gap: 6px;
    border: 3px solid #11a8ba;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 3px 0 rgba(17, 168, 186, 0.15);
}

.rocodeWizardTransferProgram::before {
    position: absolute;
    top: -7px;
    right: 9px;
    width: 23px;
    height: 9px;
    border: 3px solid #11a8ba;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    background: #ffffff;
    content: '';
}

.rocodeWizardTransferProgram i {
    display: block;
    width: 45px;
    height: 8px;
    border-radius: 3px 6px 6px 3px;
    background: #16b4c4;
}

.rocodeWizardTransferProgram i:nth-child(2) {
    width: 54px;
    background: #1bb5e2;
}

.rocodeWizardTransferProgram i:nth-child(3) {
    width: 39px;
    background: #985ee6;
}

.rocodeWizardTransferPicture[data-operation='restore'] .rocodeWizardTransferProgram i {
    display: none;
}

.rocodeWizardTransferPicture[data-operation='restore'] .rocodeWizardTransferProgram::after {
    width: 0;
    height: 0;
    margin-left: 16px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 23px solid var(--rocode-action);
    content: '';
}

.rocodeWizardTransferPath {
    position: absolute;
    top: 64px;
    left: 123px;
    width: 133px;
    height: 5px;
    border-radius: 5px;
    background: #aac5d5;
}

.rocodeWizardTransferPath::after {
    position: absolute;
    top: -5px;
    right: -2px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid #aac5d5;
    content: '';
}

.rocodeWizardTransferPath i {
    position: absolute;
    top: -5px;
    left: 0;
    width: 14px;
    height: 14px;
    border: 3px solid #ecf8ff;
    border-radius: 50%;
    background: var(--rocode-action);
    opacity: 0.35;
}

.rocodeWizardTransferPath i:nth-child(2) {
    animation-delay: -0.42s;
}

.rocodeWizardTransferPath i:nth-child(3) {
    animation-delay: -0.84s;
}

.rocodeWizardTransferBoard {
    position: absolute;
    top: 24px;
    right: 35px;
    width: 78px;
    height: 84px;
    border: 4px solid #3564d7;
    border-radius: 9px;
    background: #5b88f5;
    box-shadow: 0 4px 0 rgba(53, 100, 215, 0.18);
}

.rocodeWizardTransferBoard::before,
.rocodeWizardTransferBoard::after {
    position: absolute;
    top: 15px;
    bottom: 15px;
    width: 7px;
    background: repeating-linear-gradient(
        to bottom,
        #f5c44c 0,
        #f5c44c 5px,
        transparent 5px,
        transparent 10px
    );
    content: '';
}

.rocodeWizardTransferBoard::before {
    left: -10px;
}

.rocodeWizardTransferBoard::after {
    right: -10px;
}

.rocodeWizardBoardChip {
    position: absolute;
    top: 25px;
    left: 20px;
    width: 31px;
    height: 31px;
    border: 3px solid #dce7ff;
    border-radius: 5px;
    background: #294faa;
}

.rocodeWizardBoardLight {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    border: 2px solid #dce7ff;
    border-radius: 50%;
    background: #f5c44c;
}

.rocodeWizardBoardPins {
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;
    height: 5px;
    border-radius: 5px;
    background: #b9cdff;
}

.rocodeWizardTransferCheck {
    position: absolute;
    z-index: 2;
    top: 9px;
    right: 19px;
    display: none;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 3px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    background: #4d9c31;
    box-shadow: 0 2px 6px rgba(46, 115, 31, 0.24);
    font-size: 18px;
    font-weight: 800;
}

.rocodeWizardTransferPicture[data-stage='preparing'] .rocodeWizardTransferProgram,
.rocodeWizardTransferPicture[data-stage='compiling'] .rocodeWizardTransferProgram,
.rocodeWizardTransferPicture[data-stage='memoryWarning'] .rocodeWizardTransferProgram {
    animation: rocodeProgramPrepare 1.1s ease-in-out infinite;
}

.rocodeWizardTransferPicture[data-stage='waitingForBoard'] .rocodeWizardTransferBoard {
    animation: rocodeBoardWaiting 1.1s ease-in-out infinite;
}

.rocodeWizardTransferPicture[data-stage='uploading'] .rocodeWizardTransferPath,
.rocodeWizardTransferPicture[data-stage='restoringLive'] .rocodeWizardTransferPath {
    background: var(--rocode-action);
}

.rocodeWizardTransferPicture[data-stage='uploading'] .rocodeWizardTransferPath::after,
.rocodeWizardTransferPicture[data-stage='restoringLive'] .rocodeWizardTransferPath::after {
    border-left-color: var(--rocode-action);
}

.rocodeWizardTransferPicture[data-stage='uploading'] .rocodeWizardTransferPath i,
.rocodeWizardTransferPicture[data-stage='restoringLive'] .rocodeWizardTransferPath i {
    opacity: 1;
    animation: rocodeProgramPacket 1.25s linear infinite;
}

.rocodeWizardTransferPicture[data-stage='uploading'] .rocodeWizardBoardLight,
.rocodeWizardTransferPicture[data-stage='restoringLive'] .rocodeWizardBoardLight {
    animation: rocodeBoardLight 0.7s steps(2, end) infinite;
}

.rocodeWizardTransferPicture[data-stage='complete'] .rocodeWizardTransferCheck {
    display: grid;
}

.rocodeWizardTransferPicture[data-stage='complete'] .rocodeWizardTransferBoard {
    border-color: #3d8429;
    background: #61ad46;
}

/* On Board upload story: code → yellow Mainboard → RoboThink robot. */
.rocodeWizardPictureUsb,
.rocodeWizardPictureUpload {
    width: min(360px, 100%);
    height: 132px;
}

.rocodeWizardPictureUsb {
    background: linear-gradient(180deg, #f2faff 0%, #e8f5fb 100%);
}

.rocodeWizardHardwareConnectionImage {
    position: absolute;
    inset: 8px 14px;
    width: calc(100% - 28px);
    height: calc(100% - 16px);
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 5px 4px rgba(99, 68, 28, 0.14));
}

.rocodeWizardUploadAnimationHost {
    position: relative;
    width: min(390px, 100%);
    aspect-ratio: 5 / 2;
    margin: 6px auto 0;
    overflow: clip;
    border: 1px solid #cfe3ef;
    border-radius: 10px;
    background: #eff5fd;
}

.rocodeWizardUploadAnimationHost[hidden] {
    display: none;
}

.rocodeWizardUploadAnimationHost[data-animation-ready='false'] iframe {
    visibility: hidden;
}

.rocodeWizardUploadAnimation {
    position: absolute;
    left: 0;
    top: calc(18px - 20.3125%);
    display: block;
    width: 100%;
    height: 140.625%;
    border: 0;
    background: #eff5fd;
    pointer-events: none;
}

.rocodeWizardMainboardImage {
    position: absolute;
    right: 25px;
    bottom: 12px;
    width: 118px;
    height: 104px;
    object-fit: contain;
    filter: drop-shadow(0 5px 4px rgba(99, 68, 28, 0.16));
}

.rocodeWizardPictureUsb .rocodeWizardComputer {
    top: 35px;
    left: 38px;
}

.rocodeWizardPictureUsb .rocodeWizardCable {
    top: 64px;
    left: 97px;
    width: 134px;
}

.rocodeWizardPictureUsb .rocodeWizardMainboardImage {
    z-index: 2;
}

.rocodeOnBoardWizardPage > .rocodeWizardPassedMessage {
    display: flex;
    align-items: center;
    margin: 13px 0 12px;
    gap: 7px;
    color: #287a4b;
    font-size: 13px;
    line-height: 19px;
}

.rocodeWizardPassedMessage > span {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #3f995c;
    font-size: 13px;
    font-weight: 800;
}

.rocodeWizardPassedMessage strong {
    font-weight: 800;
}

.rocodeWizardPictureUpload {
    background: linear-gradient(180deg, #f4fbff 0%, #eaf6fc 100%);
}

.rocodeWizardPictureUpload .rocodeWizardProgramCard {
    top: 31px;
    left: 42px;
    align-content: center;
    justify-items: start;
    padding: 0 12px;
    gap: 6px;
    box-sizing: border-box;
}

.rocodeWizardProgramCard i {
    display: block;
    width: 34px;
    height: 6px;
    border-radius: 4px;
    background: #16b4c4;
}

.rocodeWizardProgramCard i:nth-child(2) {
    width: 40px;
    background: #4f80ff;
}

.rocodeWizardProgramCard i:nth-child(3) {
    width: 27px;
    background: #985ee6;
}

.rocodeWizardPictureUpload .rocodeWizardUploadArrow {
    top: 45px;
    left: 132px;
}

.rocodeWizardPictureUpload .rocodeWizardMainboardImage {
    right: 24px;
}

.rocodeWizardTransferPicture {
    width: min(410px, 100%);
    height: 154px;
    background:
        radial-gradient(circle at 88% 18%, rgba(79, 128, 255, 0.1), transparent 34%),
        linear-gradient(180deg, #f3fbff 0%, #e9f6fc 100%);
}

.rocodeWizardTransferProgram {
    top: 38px;
    left: 25px;
}

.rocodeWizardTransferProgram i {
    transform-origin: left center;
}

.rocodeWizardTransferPicture[data-stage='preparing'] .rocodeWizardTransferProgram i,
.rocodeWizardTransferPicture[data-stage='compiling'] .rocodeWizardTransferProgram i,
.rocodeWizardTransferPicture[data-stage='memoryWarning'] .rocodeWizardTransferProgram i {
    animation: rocodeCompileLine 1.15s ease-in-out infinite;
}

.rocodeWizardTransferPicture[data-stage='preparing'] .rocodeWizardTransferProgram i:nth-child(2),
.rocodeWizardTransferPicture[data-stage='compiling'] .rocodeWizardTransferProgram i:nth-child(2),
.rocodeWizardTransferPicture[data-stage='memoryWarning'] .rocodeWizardTransferProgram i:nth-child(2) {
    animation-delay: -0.38s;
}

.rocodeWizardTransferPicture[data-stage='preparing'] .rocodeWizardTransferProgram i:nth-child(3),
.rocodeWizardTransferPicture[data-stage='compiling'] .rocodeWizardTransferProgram i:nth-child(3),
.rocodeWizardTransferPicture[data-stage='memoryWarning'] .rocodeWizardTransferProgram i:nth-child(3) {
    animation-delay: -0.76s;
}

.rocodeWizardTransferPath {
    top: 76px;
    left: 125px;
    width: 138px;
}

.rocodeWizardTransferRobot {
    position: absolute;
    right: 20px;
    bottom: 3px;
    width: 126px;
    height: 146px;
    object-fit: contain;
    filter: drop-shadow(0 7px 5px rgba(43, 66, 79, 0.17));
    transform-origin: center bottom;
}

.rocodeWizardTransferPicture[data-stage='waitingForBoard'] .rocodeWizardTransferRobot {
    animation: rocodeRobotWaiting 1.15s ease-in-out infinite;
}

.rocodeWizardTransferPicture[data-stage='preparing'] .rocodeWizardTransferPath,
.rocodeWizardTransferPicture[data-stage='compiling'] .rocodeWizardTransferPath,
.rocodeWizardTransferPicture[data-stage='memoryWarning'] .rocodeWizardTransferPath,
.rocodeWizardTransferPicture[data-stage='uploading'] .rocodeWizardTransferPath {
    background: var(--rocode-action);
}

.rocodeWizardTransferPicture[data-stage='preparing'] .rocodeWizardTransferPath::after,
.rocodeWizardTransferPicture[data-stage='compiling'] .rocodeWizardTransferPath::after,
.rocodeWizardTransferPicture[data-stage='memoryWarning'] .rocodeWizardTransferPath::after,
.rocodeWizardTransferPicture[data-stage='uploading'] .rocodeWizardTransferPath::after {
    border-left-color: var(--rocode-action);
}

.rocodeWizardTransferPicture[data-stage='preparing'] .rocodeWizardTransferPath i,
.rocodeWizardTransferPicture[data-stage='compiling'] .rocodeWizardTransferPath i,
.rocodeWizardTransferPicture[data-stage='memoryWarning'] .rocodeWizardTransferPath i,
.rocodeWizardTransferPicture[data-stage='uploading'] .rocodeWizardTransferPath i {
    opacity: 1;
    animation: rocodeProgramPacket 1.25s linear infinite;
}

.rocodeWizardTransferPicture[data-stage='uploading'] .rocodeWizardTransferRobot {
    animation: rocodeRobotReceiving 1s ease-in-out infinite;
}

.rocodeWizardTransferPicture[data-stage='complete'] .rocodeWizardTransferRobot {
    animation: rocodeRobotReady 480ms ease-out both;
}

.rocodeWizardTransferPicture[data-stage='complete'] .rocodeWizardTransferCheck {
    top: 14px;
    right: 17px;
}

/* The supplied upload animation is split across the real workflow stages:
   compile the block stack, carry packets along the cable, then pulse the robot. */
.rocodeWizardTransferPicture {
    width: min(410px, 100%);
    height: auto;
    aspect-ratio: 5 / 2;
}

.rocodeWizardTransferProgram {
    z-index: 2;
    top: 29px;
    left: 30px;
    width: 74px;
    height: 86px;
    padding-left: 10px;
    gap: 7px;
    border-color: var(--rocode-action);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(74, 108, 248, 0.14);
}

.rocodeWizardTransferProgram::before {
    border-color: var(--rocode-action);
    border-bottom: 0;
}

.rocodeWizardTransferProgram i {
    width: 50px;
    height: 9px;
}

.rocodeWizardTransferProgram i:nth-child(2) {
    width: 42px;
}

.rocodeWizardTransferProgram i:nth-child(3) {
    width: 47px;
}

.rocodeWizardTransferCable {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.rocodeWizardTransferCable > path {
    fill: none;
    stroke: #a9c6ec;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1 11;
    animation: rocodeTransferCableFlow 3.6s linear infinite;
}

.rocodeWizardTransferPackets,
.rocodeWizardTransferRings {
    opacity: 0;
}

.rocodeWizardTransferPacketBlue {
    fill: #4a6cf8;
}

.rocodeWizardTransferPacketTeal {
    fill: #16afa6;
}

.rocodeWizardTransferPacketPurple {
    fill: #8b5cf6;
}

.rocodeWizardTransferRings circle {
    fill: none;
    stroke: var(--rocode-action);
    stroke-width: 3;
    transform-box: fill-box;
    transform-origin: center;
}

.rocodeWizardTransferRings circle:nth-child(2) {
    animation-delay: -0.55s !important;
}

.rocodeWizardTransferRobot {
    z-index: 2;
    top: 24px;
    right: 20px;
    bottom: auto;
    width: 104px;
    height: auto;
    transform-origin: 50% 60%;
}

.rocodeWizardTransferPicture[data-stage='preparing'] .rocodeWizardTransferProgram i,
.rocodeWizardTransferPicture[data-stage='compiling'] .rocodeWizardTransferProgram i,
.rocodeWizardTransferPicture[data-stage='memoryWarning'] .rocodeWizardTransferProgram i {
    animation: rocodeCompileSnap 1.15s ease-in-out infinite;
}

.rocodeWizardTransferPicture[data-stage='preparing'] .rocodeWizardTransferProgram i:nth-child(2),
.rocodeWizardTransferPicture[data-stage='compiling'] .rocodeWizardTransferProgram i:nth-child(2),
.rocodeWizardTransferPicture[data-stage='memoryWarning'] .rocodeWizardTransferProgram i:nth-child(2) {
    animation-delay: -0.38s;
}

.rocodeWizardTransferPicture[data-stage='preparing'] .rocodeWizardTransferProgram i:nth-child(3),
.rocodeWizardTransferPicture[data-stage='compiling'] .rocodeWizardTransferProgram i:nth-child(3),
.rocodeWizardTransferPicture[data-stage='memoryWarning'] .rocodeWizardTransferProgram i:nth-child(3) {
    animation-delay: -0.76s;
}

.rocodeWizardTransferPicture[data-stage='uploading'] .rocodeWizardTransferCable > path {
    stroke: var(--rocode-action);
}

.rocodeWizardTransferPicture[data-stage='uploading'] .rocodeWizardTransferPackets,
.rocodeWizardTransferPicture[data-stage='uploading'] .rocodeWizardTransferRings {
    opacity: 1;
}

.rocodeWizardTransferPicture[data-stage='uploading'] .rocodeWizardTransferRings circle {
    animation: rocodeTransferRing 1.4s ease-out infinite;
}

.rocodeWizardTransferPicture[data-stage='uploading'] .rocodeWizardTransferRobot {
    animation: rocodeUploadRobotReceive 1s ease-in-out infinite;
}

.rocodeWizardTransferPicture[data-stage='complete'] .rocodeWizardTransferRobot {
    animation: rocodeRobotReady 480ms ease-out both;
}

.rocodeOnBoardWizardPage[data-onboard-view='check'] > .rocodeWizardPrimaryAction,
.rocodeOnBoardWizardPage[data-onboard-view='upload'] > .rocodeWizardPrimaryAction {
    margin-top: 14px;
}

.rocodeOnBoardWizardPage [data-onboard-check-result-title]:not([hidden])
    + .rocodeWizardPrimaryAction {
    margin-top: 0;
}

.rocodeWizardPrimaryAction {
    display: grid;
    width: min(360px, 100%);
    min-height: 50px;
    place-items: center;
    align-content: center;
    padding: 10px 18px;
    border: 1px solid var(--rocode-action);
    border-radius: 6px;
    color: #ffffff;
    background: var(--rocode-action);
    box-shadow: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.rocodeWizardPrimaryAction:hover {
    border-color: var(--rocode-action-hover);
    background: var(--rocode-action-hover);
    box-shadow: 0 2px 6px rgba(40, 84, 199, 0.24);
}

.rocodeWizardPrimaryAction:active {
    border-color: var(--rocode-action-pressed);
    background: var(--rocode-action-pressed);
    box-shadow: none;
    transform: translateY(1px);
}

.rocodeWizardPrimaryAction:disabled {
    border-color: var(--rocode-disabled-bg);
    color: var(--rocode-disabled-text);
    background: var(--rocode-disabled-bg);
    box-shadow: none;
    cursor: wait;
}

.rocodeWizardBackAction {
    margin-top: 13px;
    padding: 6px 14px;
    color: var(--rocode-action);
    background: transparent;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

.rocodeOnBoardWizardBody > .rocodeOnBoardStatus {
    width: min(390px, 100%);
    margin: 14px auto 0;
    border: 1px solid #aac5d5;
    border-radius: 4px;
    text-align: left;
}

.rocodeOnBoardWizardModal[data-outcome='checkError'] .rocodeWizardPictureCheck {
    display: none;
}

.rocodeOnBoardIssues {
    width: min(390px, 100%);
    margin: 12px auto 0;
    text-align: left;
}

.rocodeOnBoardIssues[hidden] {
    display: none;
}

.rocodeOnBoardIssues header {
    margin-bottom: 8px;
}

.rocodeOnBoardIssues h3 {
    margin: 0;
    color: #2c313d;
    font-size: 15px;
    line-height: 21px;
}

.rocodeOnBoardIssues header p {
    margin: 2px 0 0;
    color: #64717a;
    font-size: 12px;
    line-height: 17px;
}

.rocodeOnBoardIssues ol {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 8px;
    list-style: none;
}

.rocodeOnBoardIssue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 10px 10px 10px 12px;
    gap: 12px;
    border: 1px solid #efbbb5;
    border-radius: 8px;
    background: #fff8f7;
}

.rocodeOnBoardIssueCopy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.rocodeOnBoardIssueCopy strong {
    color: #6f2f2a;
    font-size: 12px;
    font-weight: 650;
    line-height: 17px;
}

.rocodeOnBoardIssueCopy small {
    overflow: hidden;
    color: #7c6967;
    font-size: 11px;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rocodeOnBoardIssueAction {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--rocode-action);
    border-radius: 6px;
    color: var(--rocode-action);
    background: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.rocodeOnBoardIssueAction:hover {
    color: #ffffff;
    background: var(--rocode-action-hover);
}

.rocodeOnBoardIssueAction:active {
    color: #ffffff;
    background: var(--rocode-action-pressed);
    transform: translateY(1px);
}

.entryBoard .rocodeOnBoardIssueHighlight {
    animation: rocodeOnBoardIssuePulse 700ms ease-in-out 3;
}

.rocodeOnBoardUploadReadyPage {
    padding: 14px 0 4px;
}

.rocodeOnBoardUploadReadyPage > .rocodeWizardPrimaryAction {
    margin-top: 0 !important;
}

.rocodeWizardUsbFeedback {
    position: relative;
    width: min(360px, 100%);
    margin: 0 0 12px;
    padding: 10px 12px 10px 42px;
    box-sizing: border-box;
    border: 1px solid #efbbb5;
    border-radius: 8px;
    color: #6f2f2a;
    background: #fff8f7;
    font-size: 12px;
    font-weight: 650;
    line-height: 18px;
    text-align: left;
}

.rocodeWizardUsbFeedback[hidden] {
    display: none;
}

.rocodeWizardUsbFeedback::before {
    position: absolute;
    top: 50%;
    left: 12px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #c85048;
    content: '!';
    font-size: 13px;
    font-weight: 800;
    transform: translateY(-50%);
}

.rocodeWizardUsbFeedback[data-state='ready'] {
    border-color: #b9d8ea;
    color: #315f7a;
    background: #f3faff;
}

.rocodeWizardUsbFeedback[data-state='ready']::before {
    background: var(--rocode-action);
    content: '…';
}
.rocodeCheckedMemory {
    width: min(390px, 100%);
    margin: 18px auto 0;
    padding: 11px 13px 12px;
    border: 1px solid #c9dce8;
    border-radius: 8px;
    background: #f5fbff;
}

.rocodeCheckedMemory[hidden] {
    display: none;
}

.rocodeCheckedMemory header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #29495c;
    font-size: 13px;
}

.rocodeCheckedMemory header span {
    color: #315f7a;
    font-weight: 800;
}

.rocodeCheckedMemory p {
    margin: 3px 0 8px;
    color: #607887;
    font-size: 12px;
}

.rocodeCheckedMemoryTrack {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #dceaf2;
}

.rocodeCheckedMemoryTrack span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #4d82ee;
    transition: width 180ms ease;
}

.rocodeCheckedMemory[data-level='warning'] .rocodeCheckedMemoryTrack span {
    background: #d58b12;
}

.rocodeCheckedMemory[data-level='high'] .rocodeCheckedMemoryTrack span {
    background: #ce4b46;
}

.rocodeOnBoardUpdatingPage .rocodeOnBoardProgress {
    width: min(410px, 100%);
    padding: 10px 0 0;
    border: 0;
    background: transparent;
}

.rocodeOnBoardSuccessPage {
    padding: 22px 0 12px;
}

.rocodeWizardSuccessIcon {
    display: grid;
    width: 104px;
    height: 104px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #4d9c31;
    box-shadow: 0 8px 22px rgba(46, 115, 31, 0.22);
    font-size: 62px;
    font-weight: 800;
}

.rocodeOnBoardHelpDialog {
    width: min(430px, calc(100vw - 32px));
}

.rocodeOnBoardHelpBadge {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--rocode-action);
    font-size: 23px;
    font-weight: 800;
}

.rocodeOnBoardHelpBody {
    display: grid;
    gap: 10px;
    padding: 20px;
}

.rocodeOnBoardHelpBody > section {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid #d6e9f4;
    border-radius: 6px;
    background: #f8fcff;
}

.rocodeOnBoardHelpBody h2,
.rocodeOnBoardHelpBody p {
    margin: 0;
}

.rocodeOnBoardHelpBody h2 {
    color: #2c313d;
    font-size: 15px;
    line-height: 21px;
}

.rocodeOnBoardHelpBody p {
    margin-top: 2px;
    color: #4d616e;
    font-size: 12px;
    line-height: 18px;
}

.rocodeOnBoardHelpIcon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
}

.rocodeOnBoardHelpIconBoard {
    background: #4d9c31;
}

.rocodeOnBoardHelpIconLive {
    padding-left: 2px;
    background: var(--rocode-action);
    font-size: 13px;
}

.rocodeOnBoardHelpBody .rocodeWizardPrimaryAction {
    width: 100%;
    margin-top: 4px;
}

/* Mainboard workspace ----------------------------------------------------- */
.entry .propertyTabobject,
.entry .propertyTabhelper,
.entry .propertyTabconsole,
.entry .propertyTabmainboard,
.entry .propertyTabhw {
    position: relative;
    overflow: visible;
    border-radius: 5px 0 0 5px;
    color: transparent !important;
    background-color: #c7dce6 !important;
    background-image: none !important;
    font-size: 0;
    transition: background-color 120ms ease, transform 80ms ease;
}

.entry .propertyTabobject::before,
.entry .propertyTabhelper::before,
.entry .propertyTabconsole::before,
.entry .propertyTabmainboard::before,
.entry .propertyTabhw::before {
    position: absolute;
    top: 10px;
    left: 4px;
    width: 17px;
    height: 17px;
    background-color: #4f7184;
    content: '';
    transition: transform 130ms cubic-bezier(0.2, 0.75, 0.3, 1);
}

.entry .propertyTabobject:not(.selected):is(:hover, :focus-visible),
.entry .propertyTabhelper:not(.selected):is(:hover, :focus-visible),
.entry .propertyTabconsole:not(.selected):is(:hover, :focus-visible),
.entry .propertyTabmainboard:not(.selected):is(:hover, :focus-visible),
.entry .propertyTabhw:not(.selected):is(:hover, :focus-visible) {
    background-color: #b9d0dc !important;
}

.entry .propertyTabobject:is(:hover, :focus-visible)::before,
.entry .propertyTabhelper:is(:hover, :focus-visible)::before,
.entry .propertyTabconsole:is(:hover, :focus-visible)::before,
.entry .propertyTabmainboard:is(:hover, :focus-visible)::before,
.entry .propertyTabhw:is(:hover, :focus-visible)::before {
    transform: scale(1.12);
}

.entry .propertyTabobject:active,
.entry .propertyTabhelper:active,
.entry .propertyTabconsole:active,
.entry .propertyTabmainboard:active,
.entry .propertyTabhw:active {
    background-color: #a9c4d1 !important;
    transform: translateX(1px);
}

.entry .propertyTabobject:active::before,
.entry .propertyTabhelper:active::before,
.entry .propertyTabconsole:active::before,
.entry .propertyTabmainboard:active::before,
.entry .propertyTabhw:active::before {
    transform: scale(0.92);
}

.entry .propertyTabobject:focus-visible,
.entry .propertyTabhelper:focus-visible,
.entry .propertyTabconsole:focus-visible,
.entry .propertyTabmainboard:focus-visible,
.entry .propertyTabhw:focus-visible {
    z-index: 2;
    outline: 2px solid var(--rocode-focus);
    outline-offset: -2px;
}

.entry .propertyTabobject::before {
    -webkit-mask: url('../assets/controls/property-object.svg') center / contain no-repeat;
    mask: url('../assets/controls/property-object.svg') center / contain no-repeat;
}

.entry .propertyTabhelper::before {
    -webkit-mask: url('../assets/controls/property-help.svg') center / contain no-repeat;
    mask: url('../assets/controls/property-help.svg') center / contain no-repeat;
}

.entry .propertyTabconsole::before {
    -webkit-mask: url('../assets/controls/property-console.svg') center / contain no-repeat;
    mask: url('../assets/controls/property-console.svg') center / contain no-repeat;
}

.entry .propertyTabmainboard::before {
    -webkit-mask: url('../assets/controls/mainboard-chip.svg') center / contain no-repeat;
    mask: url('../assets/controls/mainboard-chip.svg') center / contain no-repeat;
}

.entry .propertyTabobject.selected,
.entry .propertyTabhelper.selected,
.entry .propertyTabconsole.selected,
.entry .propertyTabmainboard.selected,
.entry .propertyTabhw.selected {
    border-radius: 5px 0 0 5px;
    background-color: var(--rocode-action) !important;
}

.entry .propertyTabobject.selected::before,
.entry .propertyTabhelper.selected::before,
.entry .propertyTabconsole.selected::before,
.entry .propertyTabmainboard.selected::before,
.entry .propertyTabhw.selected::before {
    background-color: #ffffff;
}

.entry .propertyTabhw::before {
    -webkit-mask: url('../assets/controls/sensor.svg') center / contain no-repeat;
    mask: url('../assets/controls/sensor.svg') center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
    .entry .propertyTabobject,
    .entry .propertyTabhelper,
    .entry .propertyTabconsole,
    .entry .propertyTabmainboard,
    .entry .propertyTabhw,
    .entry .propertyTabobject::before,
    .entry .propertyTabhelper::before,
    .entry .propertyTabconsole::before,
    .entry .propertyTabmainboard::before,
    .entry .propertyTabhw::before {
        transition: none;
    }
}

#workspace .entryBlockHelperIntro .entryBlockHelperContent {
    font-family: var(--rocode-font-family) !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
}

.rocodeMainboardPanel {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    bottom: 0;
    left: 25px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0 6px 6px 6px;
    background: #ecf8ff;
    scrollbar-color: #a6b4bc transparent;
    scrollbar-width: thin;
}

.rocodeMainboardPanel::-webkit-scrollbar,
.rocodeSensorPanel::-webkit-scrollbar {
    width: 8px;
}

.rocodeMainboardPanel::-webkit-scrollbar-track,
.rocodeSensorPanel::-webkit-scrollbar-track {
    background: transparent;
}

.rocodeMainboardPanel::-webkit-scrollbar-thumb,
.rocodeSensorPanel::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #a6b4bc;
    background-clip: padding-box;
}

.rocodeMainboardPanel[hidden] {
    display: none;
}

.rocodeMainboardPanelHeader {
    display: flex;
    position: sticky;
    z-index: 6;
    top: 0;
    min-height: 54px;
    gap: 9px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #d5e0e5;
    background: #d6e9f4;
}

.rocodeMainboardPanelIcon,
.rocodeSensorPanelIcon {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    color: var(--rocode-action);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.rocodeMainboardPanelIcon::before,
.rocodeSensorPanelIcon::before {
    display: block;
    width: 22px;
    height: 22px;
    background: currentColor;
    content: '';
}

.rocodeMainboardPanelIcon::before {
    -webkit-mask: url('../assets/controls/mainboard-chip.svg') center / contain no-repeat;
    mask: url('../assets/controls/mainboard-chip.svg') center / contain no-repeat;
}

.rocodeMainboardPanelHeading {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 1px;
    align-items: center;
}

.rocodeMainboardPanelHeading strong {
    color: #29475e;
    font-size: 14px;
    line-height: 19px;
}

.rocodeBluetoothSignal {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    color: #627a89;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px;
    white-space: nowrap;
}

.rocodeBluetoothSignal[hidden] {
    display: none;
}

.rocodeBluetoothSignalBars {
    display: inline-flex;
    width: 14px;
    height: 10px;
    flex: 0 0 14px;
    align-items: flex-end;
    gap: 1px;
}

.rocodeBluetoothSignalBars i {
    width: 2px;
    border-radius: 1px;
    background: #d0dbe0;
}

.rocodeBluetoothSignalBars i:nth-child(1) { height: 3px; }
.rocodeBluetoothSignalBars i:nth-child(2) { height: 5px; }
.rocodeBluetoothSignalBars i:nth-child(3) { height: 7px; }
.rocodeBluetoothSignalBars i:nth-child(4) { height: 9px; }

.rocodeBluetoothSignal[data-bars='1'] .rocodeBluetoothSignalBars i:nth-child(1),
.rocodeBluetoothSignal[data-bars='2'] .rocodeBluetoothSignalBars i:nth-child(1),
.rocodeBluetoothSignal[data-bars='2'] .rocodeBluetoothSignalBars i:nth-child(2),
.rocodeBluetoothSignal[data-bars='3'] .rocodeBluetoothSignalBars i:nth-child(1),
.rocodeBluetoothSignal[data-bars='3'] .rocodeBluetoothSignalBars i:nth-child(2),
.rocodeBluetoothSignal[data-bars='3'] .rocodeBluetoothSignalBars i:nth-child(3),
.rocodeBluetoothSignal[data-bars='4'] .rocodeBluetoothSignalBars i {
    background: #3e8ba8;
}

.rocodeBluetoothSignal[data-quality='weak'] {
    color: #a75e24;
}

.rocodeBluetoothSignal[data-quality='weak'] .rocodeBluetoothSignalBars i:first-child {
    background: #d98135;
}

.rocodeMainboardConnectionBadge {
    display: inline-flex;
    overflow: hidden;
    max-width: 160px;
    flex: 0 1 auto;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #526b79;
    background: #edf2f4;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rocodeMainboardConnectionBadge::before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #8297a2;
    content: '';
}

.rocodeMainboardPanel[data-connection-state='connected'] .rocodeMainboardConnectionBadge {
    color: #286344;
    background: #e8f5ed;
}

.rocodeMainboardPanel[data-connection-state='connected'] .rocodeMainboardConnectionBadge::before {
    background: #39a35a;
}

.rocodeMainboardPanel[data-connection-state='connecting'] .rocodeMainboardConnectionBadge,
.rocodeMainboardPanel[data-connection-state='updating'] .rocodeMainboardConnectionBadge {
    color: #34657f;
    background: #eaf5fa;
}

.rocodeMainboardPanel[data-connection-state='connecting'] .rocodeMainboardConnectionBadge::before,
.rocodeMainboardPanel[data-connection-state='updating'] .rocodeMainboardConnectionBadge::before {
    background: #4e9fc7;
    animation: rocodeMainboardStatusPulse 1.1s ease-in-out infinite;
}

.rocodeMainboardPanel[data-connection-state='error'] .rocodeMainboardConnectionBadge {
    color: #9b413b;
    background: #fff0ef;
}

.rocodeMainboardPanel[data-connection-state='error'] .rocodeMainboardConnectionBadge::before {
    background: #c84a42;
}

.rocodeMainboardModeSection {
    display: grid;
    gap: 6px;
    padding: 9px 12px 11px;
    border-bottom: 1px solid #dbe4e8;
    background: #ecf8ff;
}

.rocodeMainboardSectionLabel {
    color: #3f5c6d;
    font-size: 13px;
    font-weight: 800;
    line-height: 17px;
}

.rocodeMainboardModeControl {
    display: flex;
    height: 40px;
    padding: 3px;
    border: 1px solid #cedbe2;
    border-radius: 9px;
    background: #e2ebef;
}

.rocodeMainboardModeControl button {
    display: inline-flex;
    min-width: 84px;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    color: #5d7280;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.rocodeMainboardModeControl button::before {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    background: currentColor;
    content: '';
}

.rocodeMainboardModeControl button[data-execution-target='live']::before {
    -webkit-mask: url('../assets/controls/live.svg') center / contain no-repeat;
    mask: url('../assets/controls/live.svg') center / contain no-repeat;
}

.rocodeMainboardModeControl button[data-execution-target='onboard']::before {
    -webkit-mask: url('../assets/controls/on-board.svg') center / contain no-repeat;
    mask: url('../assets/controls/on-board.svg') center / contain no-repeat;
}

.rocodeMainboardModeControl button:hover {
    color: #294d64;
    background: rgba(255, 255, 255, 0.6);
}

.rocodeMainboardModeControl button.is-active {
    color: var(--rocode-header-text);
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(37, 67, 91, 0.13);
}

.rocodeMainboardModeControl button:focus-visible {
    outline: 2px solid var(--rocode-focus);
    outline-offset: 1px;
}

.rocodeMainboardModeSection .rocodeModeCompatibilityHint {
    padding: 1px 2px 0;
}

.rocodeMainboardOnBoardAction {
    display: flex;
    position: relative;
    width: calc(100% - 24px);
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px;
    padding: 7px 12px;
    border: 1px solid var(--rocode-action);
    border-radius: 4px;
    color: #ffffff;
    background: var(--rocode-action);
    box-shadow: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease,
        box-shadow 120ms ease, transform 80ms ease;
}

.rocodeMainboardOnBoardAction::before {
    position: static;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: currentColor;
    content: '';
    transform: none;
    -webkit-mask: url('../assets/controls/on-board.svg') center / contain no-repeat;
    mask: url('../assets/controls/on-board.svg') center / contain no-repeat;
}

.rocodeMainboardOnBoardAction:not(:disabled):hover {
    border-color: var(--rocode-action-hover);
    background: var(--rocode-action-hover);
    box-shadow: 0 2px 6px rgba(40, 84, 199, 0.24);
}

.rocodeMainboardOnBoardAction:not(:disabled):active {
    border-color: var(--rocode-action-pressed);
    background: var(--rocode-action-pressed);
    box-shadow: none;
    transform: translateY(1px);
}

.rocodeMainboardOnBoardAction span {
    font: inherit;
}

.rocodeMainboardOnBoardAction[hidden] {
    display: none;
}

.rocodeMainboardEmbeddedControls {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.rocodeMainboardEmbeddedControls .rocodeLiveConnectionIntro,
.rocodeMainboardEmbeddedControls .rocodeHardwareHint {
    display: none;
}

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

.rocodeMainboardActionHeading {
    margin: 0;
    padding: 11px 12px 4px;
    color: #3f5c6d;
    font-size: 13px;
    font-weight: 800;
    line-height: 18px;
}

.rocodeMainboardEmbeddedControls .rocodeLiveConnectionChoices {
    gap: 8px;
    padding: 4px 12px 12px;
}

.rocodeMainboardEmbeddedControls .rocodeLiveConnectionChoices[hidden],
.rocodeMainboardEmbeddedControls
    .rocodeLiveConnectionChoices
    button[data-hardware-action][hidden] {
    display: none !important;
}

.rocodeMainboardEmbeddedControls .rocodeLiveConnectionChoices button[data-hardware-action] {
    display: grid;
    min-height: 36px;
    grid-template-columns: 16px auto;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--rocode-action);
    border-radius: 4px;
    color: var(--rocode-action);
    background: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    transition: background-color 120ms ease, border-color 120ms ease,
        color 120ms ease, transform 80ms ease;
}

.rocodeMainboardEmbeddedControls .rocodeLiveConnectionChoices button[data-hardware-action]:not(:disabled):hover {
    border-color: var(--rocode-action-hover);
    color: var(--rocode-action-hover);
    background: var(--rocode-action-soft);
}

.rocodeMainboardEmbeddedControls .rocodeLiveConnectionChoices button[data-hardware-action]:not(:disabled):active {
    border-color: var(--rocode-action-pressed);
    color: var(--rocode-action-pressed);
    background: #e1ebff;
    transform: translateY(1px);
}

.rocodeMainboardEmbeddedControls .rocodeConnectionChoiceIcon {
    width: 16px;
    height: 16px;
    align-self: center;
}

.rocodeMainboardEmbeddedControls .rocodeConnectionChoiceIcon::before {
    inset: 0;
    background-color: currentColor;
}

.rocodeMainboardEmbeddedControls .rocodeLiveConnectionChoices span[data-hardware-action-label] {
    align-self: center;
    font: inherit;
}

.rocodeMainboardEmbeddedControls .rocodeDisconnectAction[data-hardware-action] {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 9px;
    padding: 7px 12px;
    text-align: center;
}

.rocodeMainboardEmbeddedControls .rocodeDisconnectAction[data-hardware-action][hidden] {
    display: none !important;
}

.rocodeMainboardEmbeddedControls .rocodeDisconnectAction[data-hardware-action]::before {
    position: static;
    top: auto;
    left: auto;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.rocodeMainboardEmbeddedControls .rocodeMainboardRecovery {
    padding: 0 12px 12px;
    border-top: 0;
    background: transparent;
}

.rocodeMainboardEmbeddedControls
    .rocodeMainboardRecovery
    button[data-onboard-action='restore-live'] {
    display: flex;
    position: relative;
    width: 100%;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid var(--rocode-action);
    border-radius: 4px;
    color: var(--rocode-action);
    background: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease,
        color 120ms ease, transform 80ms ease;
}

.rocodeMainboardEmbeddedControls
    .rocodeMainboardRecovery
    button[data-onboard-action='restore-live']::before,
.rocodeMainboardEmbeddedControls
    .rocodeMainboardRecovery
    button[data-onboard-action='restore-live']::after {
    display: none;
    content: none;
}

.rocodeMainboardEmbeddedControls
    .rocodeMainboardRecovery
    .rocodeFirmwareRestoreIcon {
    display: block;
    position: static;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 0;
    background: currentColor;
    -webkit-mask: url('../assets/controls/restore-firmware-blue.svg') center / contain no-repeat;
    mask: url('../assets/controls/restore-firmware-blue.svg') center / contain no-repeat;
    transform: none;
}

.rocodeMainboardEmbeddedControls
    .rocodeMainboardRecovery
    button[data-onboard-action='restore-live']
    span[data-onboard-action-label] {
    display: block;
    font: inherit;
}

.rocodeMainboardEmbeddedControls
    .rocodeMainboardRecovery
    button[data-onboard-action='restore-live']:not(:disabled):hover {
    border-color: var(--rocode-action-hover);
    color: var(--rocode-action-hover);
    background: var(--rocode-action-soft);
}

.rocodeMainboardEmbeddedControls
    .rocodeMainboardRecovery
    button[data-onboard-action='restore-live']:not(:disabled):active {
    border-color: var(--rocode-action-pressed);
    color: var(--rocode-action-pressed);
    background: #e1ebff;
    transform: translateY(1px);
}

.rocodeMainboardEmbeddedControls
    .rocodeMainboardRecovery
    button[data-onboard-action='restore-live']:focus-visible {
    outline: 2px solid var(--rocode-focus);
    outline-offset: 2px;
}

#workspace .rocodeMainboardEmbeddedControls
    .rocodeMainboardRecovery
    button[data-onboard-action='restore-live']:disabled {
    border-color: var(--rocode-disabled-bg) !important;
    color: var(--rocode-disabled-text) !important;
    background: var(--rocode-disabled-bg) !important;
    cursor: not-allowed;
}

.rocodeFirmwareRestoreFlow {
    overflow: hidden;
    border: 1px solid #c8d7df;
    border-radius: 10px;
    color: #29475e;
    background: #ffffff;
}

.rocodeMainboardRecovery > button[hidden],
.rocodeMainboardRecovery.is-restore-flow-open
    > button[data-onboard-action='restore-live'],
.rocodeFirmwareRestoreFlow[hidden] {
    display: none !important;
}

.rocodeFirmwareRestoreFlow > div {
    display: grid;
    justify-items: center;
    padding: 14px;
    text-align: center;
}

.rocodeFirmwareRestoreFlow > div[hidden] {
    display: none;
}

.rocodeFirmwareUsbPicture {
    display: block;
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: #eef4ff url('../assets/controls/usb.svg?v=2') center / 25px no-repeat;
}

.rocodeFirmwareRestoreFlow strong {
    color: #29475e;
    font-size: 14px;
    font-weight: 800;
    line-height: 19px;
}

.rocodeFirmwareRestoreFlow p {
    margin: 3px 0 0;
    color: #5e7482;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
}

.rocodeFirmwareSerialField {
    display: grid;
    width: 100%;
    gap: 4px;
    margin-top: 12px;
    color: #405c6d;
    font-size: 10px;
    font-weight: 750;
    line-height: 14px;
    text-align: left;
}

.rocodeFirmwareSerialField[hidden] {
    display: none;
}

.rocodeFirmwareSerialField > span {
    font-size: 11px;
    font-weight: 800;
}

.rocodeFirmwareSerialField input {
    width: 100%;
    height: 36px;
    padding: 7px 10px;
    border: 1px solid #b9cbd5;
    border-radius: 7px;
    color: #29475e;
    background: #ffffff;
    font: 800 13px/20px ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rocodeFirmwareSerialField input:focus {
    border-color: var(--rocode-action);
    outline: 2px solid color-mix(in srgb, var(--rocode-action) 22%, transparent);
    outline-offset: 1px;
}

.rocodeFirmwareSerialField input[aria-invalid='true'] {
    border-color: #c96555;
}

.rocodeFirmwareSerialField small {
    color: #6b7f8a;
    font-size: 9px;
    font-weight: 600;
    line-height: 13px;
}

.rocodeFirmwareSerialField .rocodeFirmwareSerialError {
    color: #a33f32;
    font-weight: 750;
}

.rocodeFirmwareSerialField .rocodeFirmwareSerialError[hidden] {
    display: none;
}

.rocodeUploadSerialPage {
    width: min(390px, 100%);
    margin: 0 auto;
}

.rocodeUploadSerialPage .rocodeFirmwareSerialField {
    gap: 12px;
    margin: 12px 0 0;
}

.rocodeUploadSerialPage .rocodeFirmwareSerialField > span {
    font-size: 18px;
    line-height: 24px;
    text-align: center;
}

.rocodeUploadSerialPage .rocodeFirmwareSerialField small {
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.rocodeUploadSerialPage .rocodeFirmwareSerialField input {
    height: 46px;
    text-align: center;
    font-size: 18px;
}

.rocodeUploadSerialActions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

.rocodeUploadSerialActions > button {
    width: auto;
    margin: 0;
    padding: 10px 18px;
}

.rocodeFirmwareRestoreActions {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
}

.rocodeMainboardEmbeddedControls
    .rocodeFirmwareRestoreFlow
    button[data-onboard-action] {
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    line-height: 16px;
    cursor: pointer;
}

.rocodeMainboardEmbeddedControls
    .rocodeFirmwareRestoreFlow
    button[data-onboard-action]::before,
.rocodeMainboardEmbeddedControls
    .rocodeFirmwareRestoreFlow
    button[data-onboard-action]::after {
    display: none;
}

.rocodeMainboardEmbeddedControls
    .rocodeFirmwareRestoreFlow
    .rocodeFirmwareRestorePrimary[data-onboard-action] {
    border-color: var(--rocode-action);
    color: #ffffff;
    background: var(--rocode-action);
}

.rocodeMainboardEmbeddedControls
    .rocodeFirmwareRestoreFlow
    .rocodeFirmwareRestorePrimary[data-onboard-action]:hover {
    border-color: var(--rocode-action-hover);
    background: var(--rocode-action-hover);
}

.rocodeMainboardEmbeddedControls
    .rocodeFirmwareRestoreFlow
    .rocodeFirmwareRestoreSecondary[data-onboard-action] {
    border-color: #c8d7df;
    color: #536b79;
    background: #ffffff;
}

.rocodeMainboardEmbeddedControls
    .rocodeFirmwareRestoreFlow
    .rocodeFirmwareRestoreSecondary[data-onboard-action]:hover {
    border-color: #9fb7c5;
    color: #29475e;
    background: #f5f9fa;
}

.rocodeFirmwareRestoreProgress {
    width: 100%;
    height: 9px;
    margin-top: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe8ed;
}

.rocodeFirmwareRestoreProgress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--rocode-action);
    transition: width 260ms ease;
}

.rocodeFirmwareRestoreKeepConnected {
    margin-top: 12px !important;
    color: #8c651b !important;
}

.rocodeFirmwareRestoreResult {
    display: grid;
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
}

.rocodeFirmwareRestoreResult.is-success {
    background: #5a9b46;
}

.rocodeFirmwareRestoreResult.is-error {
    background: #d58a26;
}

.propertyPanel.rocodeMainboardPanelOpen .propertyContent {
    display: none;
}

.propertyPanel.rocodeMainboardOnBoard .rocodeMainboardPanel {
    min-height: 100%;
}

/* Live board values workspace ------------------------------------------- */
.rocodeSensorPanel {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    bottom: 0;
    left: 25px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0 6px 6px 6px;
    color: #29475e;
    background: #ecf8ff;
    container-type: inline-size;
    scrollbar-color: #a6b4bc transparent;
    scrollbar-width: thin;
}

.rocodeSensorPanel[hidden] {
    display: none;
}

.propertyPanel.rocodeSensorPanelOpen .propertyContent {
    display: none;
}

.rocodeSensorPanelHeader {
    display: flex;
    position: sticky;
    z-index: 6;
    top: 0;
    min-height: 54px;
    gap: 9px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #d5e0e5;
    background: #d6e9f4;
}

.rocodeSensorPanelIcon::before {
    height: 16px;
    -webkit-mask: url('../assets/controls/sensor.svg') center / contain no-repeat;
    mask: url('../assets/controls/sensor.svg') center / contain no-repeat;
}

.rocodeSensorPanelTitle {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
}

.rocodeSensorPanelTitle strong {
    font-size: 14px;
    line-height: 19px;
}

.rocodeSensorPanel[data-connection-state='connected'] .rocodeSensorConnectionBadge {
    color: #286344;
    background: #e8f5ed;
}

.rocodeSensorPanel[data-connection-state='connected'] .rocodeSensorConnectionBadge::before {
    background: #39a35a;
}

.rocodeSensorPanel[data-connection-state='connecting'] .rocodeSensorConnectionBadge,
.rocodeSensorPanel[data-connection-state='updating'] .rocodeSensorConnectionBadge {
    color: #34657f;
    background: #eaf5fa;
}

.rocodeSensorPanel[data-connection-state='connecting'] .rocodeSensorConnectionBadge::before,
.rocodeSensorPanel[data-connection-state='updating'] .rocodeSensorConnectionBadge::before {
    background: #4e9fc7;
    animation: rocodeMainboardStatusPulse 1.1s ease-in-out infinite;
}

.rocodeSensorPanel[data-connection-state='error'] .rocodeSensorConnectionBadge {
    color: #9b413b;
    background: #fff0ef;
}

.rocodeSensorPanel[data-connection-state='error'] .rocodeSensorConnectionBadge::before {
    background: #c84a42;
}

.rocodeSensorMapCard {
    margin: 10px 10px 0;
    overflow: hidden;
    border: 1px solid #d3dfe4;
    border-radius: 9px;
    background: #ffffff;
}

.rocodeSensorMapSummary {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    color: #345268;
    cursor: pointer;
    user-select: none;
}

.rocodeSensorMapSummary::-webkit-details-marker {
    display: none;
}

.rocodeSensorMapSummary::marker {
    content: '';
}

.rocodeSensorMapSummary strong {
    font-size: 12px;
    line-height: 16px;
}

.rocodeSensorMapSummary::after {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-left: auto;
    border-right: 2px solid #738895;
    border-bottom: 2px solid #738895;
    content: '';
    transform: rotate(-45deg);
}

.rocodeSensorMapCard[open] .rocodeSensorMapSummary {
    border-bottom: 1px solid #e1e8ec;
}

.rocodeSensorMapCard[open] .rocodeSensorMapSummary::after {
    transform: rotate(45deg) translate(-1px, -1px);
}

.rocodeSensorMapSummary:hover {
    background: #f7fafb;
}

.rocodeSensorMapSummary:focus-visible {
    outline: 2px solid var(--rocode-focus);
    outline-offset: -2px;
}

/* Hide only the artwork's white margins, keeping all pin and motor labels. */
.rocodeSensorMapCrop {
    width: 100%;
    aspect-ratio: 1.9 / 1;
    overflow: hidden;
}

.rocodeSensorMapCrop img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
}

.rocodeSensorSection {
    margin: 10px 10px 0;
}

.rocodeSensorSection:last-child {
    margin-bottom: 12px;
}

.rocodeSensorSectionHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 6px;
}

.rocodeSensorSectionHeader strong {
    color: #29475e;
    font-size: 13px;
    line-height: 17px;
}

.rocodeSensorValueGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.rocodeSensorValueCard {
    display: grid;
    min-width: 0;
    min-height: 40px;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border: 1px solid #d1dfe5;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 1px 1px rgba(43, 70, 87, 0.04);
}

.rocodeSensorValueCard[data-pin-kind='analog'] {
    min-height: 46px;
    grid-template-rows: 24px auto;
    gap: 2px 6px;
    padding: 5px 7px;
}

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

.rocodeSensorPinNumber {
    flex: 0 0 18px;
    color: #29475e;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 18px;
    text-align: center;
}

.rocodeSensorPinKind {
    min-width: 0;
    overflow: hidden;
    color: #526c7b;
    font-size: 12px;
    font-weight: 750;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rocodeSensorValueCard output {
    overflow: hidden;
    min-width: 28px;
    color: #245fc7;
    font-size: 16px;
    font-weight: 800;
    line-height: 20px;
    text-align: right;
    text-overflow: ellipsis;
}

.rocodeSensorPanel.is-disconnected .rocodeSensorValueCard output {
    color: #607784;
}

.rocodeLiveOutputGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.rocodeLiveOutputCard {
    display: grid;
    min-width: 0;
    min-height: 46px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 24px auto;
    align-items: center;
    gap: 2px 6px;
    padding: 5px 7px;
    border: 1px solid #d1dfe5;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 1px 1px rgba(43, 70, 87, 0.04);
}

.rocodeLiveOutputCard output {
    min-width: 34px;
    color: #245fc7;
    font-size: 13px;
    font-weight: 800;
    line-height: 18px;
    text-align: right;
    white-space: nowrap;
}

.rocodeLiveOutputCard[data-pin-kind='digital'][data-output-active='false'] output {
    color: #596f7c;
}

.rocodeLiveOutputCard[data-pin-kind='digital'][data-output-active='true'] output {
    color: #25794d;
}

.rocodeSensorInputMeter,
.rocodeLiveOutputMeter {
    height: 4px;
    grid-column: 1 / 3;
    overflow: hidden;
    border-radius: 999px;
    background: #e4ebef;
}

.rocodeSensorInputMeter i,
.rocodeLiveOutputMeter i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--rocode-action);
    transition: width 90ms linear;
}

@media (prefers-reduced-motion: reduce) {
    .rocodeSensorInputMeter i,
    .rocodeLiveOutputMeter i {
        transition: none;
    }
}

.rocodeSensorPanel[data-execution-target='onboard'] .rocodeLiveOutputCard {
    background: #f8fafb;
}

.rocodeSensorPanel[data-execution-target='onboard'] .rocodeLiveOutputCard output {
    color: #647985;
}

@container (max-width: 340px) {
    .rocodeSensorValueGrid,
    .rocodeLiveOutputGrid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-height: 650px) {
    .rocodeWizardPicture {
        height: 92px;
    }

    .rocodeWizardMainboardImage {
        right: 32px;
        bottom: 3px;
        width: 96px;
        height: 86px;
    }

    .rocodeWizardTransferProgram {
        top: 8px;
        width: 68px;
        height: 68px;
        padding-left: 10px;
    }

    .rocodeWizardTransferProgram i {
        max-width: 42px;
    }

    .rocodeWizardTransferPath {
        top: 45px;
    }

    .rocodeWizardTransferRobot {
        right: 30px;
        width: 88px;
        height: 90px;
    }

    .rocodeOnBoardWizardBody {
        padding-bottom: 18px;
    }
}

@keyframes rocodeMainboardSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes rocodeProgramPrepare {
    50% {
        border-color: var(--rocode-action);
        box-shadow: 0 0 0 5px rgba(79, 128, 255, 0.12);
        transform: translateY(-2px);
    }
}

@keyframes rocodeCompileLine {
    0%,
    100% {
        opacity: 0.62;
        transform: scaleX(0.78);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes rocodeProgramPacket {
    from {
        transform: translateX(0) scale(0.82);
    }
    35%,
    75% {
        transform: translateX(58px) scale(1);
    }
    to {
        transform: translateX(118px) scale(0.82);
    }
}

@keyframes rocodeBoardWaiting {
    50% {
        box-shadow: 0 0 0 7px rgba(79, 128, 255, 0.13);
        transform: scale(1.03);
    }
}

@keyframes rocodeBoardLight {
    50% {
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(245, 196, 76, 0.28);
    }
}

@keyframes rocodeRobotWaiting {
    50% {
        filter: drop-shadow(0 7px 9px rgba(79, 128, 255, 0.28));
        transform: translateY(-2px);
    }
}

@keyframes rocodeRobotReceiving {
    50% {
        transform: translateY(-3px) rotate(-1deg);
    }
}

@keyframes rocodeRobotReady {
    0% {
        opacity: 0.65;
        transform: scale(0.92);
    }
    70% {
        transform: scale(1.04);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rocodeMainboardStatusPulse {
    50% {
        opacity: 0.45;
        transform: scale(0.76);
    }
}

@keyframes rocodeMainboardProgress {
    0% {
        transform: translateX(-105%);
    }
    55% {
        transform: translateX(140%);
    }
    100% {
        transform: translateX(240%);
    }
}

@keyframes rocodeCompileSnap {
    0%,
    100% {
        opacity: 0.62;
        transform: translateY(-8px) scaleX(0.8);
    }
    55% {
        opacity: 1;
        transform: translateY(0) scaleX(1);
    }
    72% {
        transform: translateY(-2px) scaleX(1.04);
    }
}

@keyframes rocodeTransferCableFlow {
    to {
        stroke-dashoffset: -84;
    }
}

@keyframes rocodeTransferRing {
    0% {
        opacity: 0.55;
        transform: scale(0.7);
    }
    100% {
        opacity: 0;
        transform: scale(2.35);
    }
}

@keyframes rocodeUploadRobotReceive {
    0%,
    100% {
        filter: drop-shadow(0 6px 8px rgba(43, 66, 79, 0.16));
        transform: translateY(0) scale(1);
    }
    50% {
        filter: drop-shadow(0 6px 12px rgba(74, 108, 248, 0.42));
        transform: translateY(-2px) scale(1.035) rotate(-1deg);
    }
}

@keyframes rocodeOnBoardIssuePulse {
    0%,
    100% {
        filter: drop-shadow(0 0 0 rgba(255, 163, 46, 0));
    }
    45% {
        filter: drop-shadow(0 0 7px rgba(255, 163, 46, 0.95));
    }
}

@media (prefers-reduced-motion: reduce) {
    .rocodeOnBoardSteps li[data-state='active'] .rocodeOnBoardStepNumber::after,
    .rocodeOnBoardProgressTrack span,
    .rocodeHardwareControl[data-connection-state='updating'] .rocodeHardwareStatusDot,
    .rocodeHardwareControl[data-connection-state='connecting'] .rocodeHardwareStatusDot,
    .rocodeMainboardPanel[data-connection-state='connecting'] .rocodeMainboardConnectionBadge::before,
    .rocodeMainboardPanel[data-connection-state='updating'] .rocodeMainboardConnectionBadge::before,
    .rocodeSensorPanel[data-connection-state='connecting'] .rocodeSensorConnectionBadge::before,
    .rocodeSensorPanel[data-connection-state='updating'] .rocodeSensorConnectionBadge::before,
    .rocodeWizardTransferProgram,
    .rocodeWizardTransferProgram i,
    .rocodeWizardTransferPath i,
    .rocodeWizardTransferCable > path,
    .rocodeWizardTransferRings circle,
    .rocodeWizardTransferBoard,
    .rocodeWizardTransferRobot,
    .rocodeWizardBoardLight,
    .rocodeFirmwareRestoreProgress span,
    .rocodeLiveOutputMeter i,
    .entryBoard .rocodeOnBoardIssueHighlight {
        animation: none !important;
        transition: none !important;
    }

    .rocodeWizardTransferPackets,
    .rocodeWizardTransferRings {
        display: none !important;
    }

    .roboThinkLogo,
    .rocodeHeaderButton,
    .rocodeMainboardModeControl button,
    .rocodeExecutionTargetControl button,
    #workspace .entryCategoryElementWorkspace {
        transition: none !important;
    }

    #workspace .entryCategoryElementWorkspace:is(:hover, :focus-visible, :active) {
        background-position: 50% 4px !important;
        background-size: 32px auto !important;
    }

    #workspace #entryCategorytext::before {
        transition: none !important;
    }
}

.rocodeNotificationCenter {
    position: fixed;
    z-index: 11000;
    top: calc(var(--rocode-header-height) + 12px);
    right: 14px;
    display: flex;
    width: min(360px, calc(100vw - 28px));
    max-height: calc(100vh - var(--rocode-header-height) - 24px);
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.rocodeProjectStatus,
.rocodeNotificationCenter .entryToast {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 12px 42px 12px 48px;
    border: 1px solid #cbd8e3;
    border-left: 4px solid #4c9565;
    border-radius: 13px;
    color: #284354;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 28px rgba(35, 57, 74, 0.18),
        0 2px 7px rgba(35, 57, 74, 0.09);
    font-family: var(--rocode-font-family);
    font-size: 13px;
    font-weight: 650;
    line-height: 19px;
    text-shadow: none;
    pointer-events: auto;
    animation: rocodeNotificationEnter 180ms ease-out both;
}

.rocodeProjectStatus::before,
.rocodeNotificationCenter .entryToast::before {
    position: absolute;
    top: 13px;
    left: 13px;
    display: grid;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #ffffff;
    background: #4c9565;
    font-size: 15px;
    font-weight: 850;
    line-height: 1;
    content: '\2713';
    place-items: center;
}

.rocodeProjectStatus[data-type='neutral'],
.rocodeNotificationCenter .entryToastWarning {
    border-left-color: #d2932d;
}

.rocodeProjectStatus[data-type='neutral']::before,
.rocodeNotificationCenter .entryToastWarning::before {
    background: #d2932d;
    content: 'i';
    font-family: Georgia, serif;
}

.rocodeProjectStatus[data-type='error'],
.rocodeNotificationCenter .entryToastAlert {
    border-left-color: #c7544e;
}

.rocodeProjectStatus[data-type='error']::before,
.rocodeNotificationCenter .entryToastAlert::before {
    background: #c7544e;
    content: '!';
}

.rocodeNotificationDismiss {
    position: absolute;
    top: 9px;
    right: 9px;
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #6d8190;
    background: transparent;
    font-family: inherit;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    place-items: center;
}

.rocodeNotificationDismiss:hover {
    color: #314f62;
    background: #edf3f7;
}

.rocodeNotificationDismiss:focus-visible {
    outline: 2px solid var(--rocode-focus);
    outline-offset: 1px;
}

body .rocodeNotificationCenter .entryToastContainer {
    position: static;
    display: flex;
    width: 100%;
    max-height: none;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
}

.rocodeNotificationCenter .entryToast {
    cursor: default;
    transition: opacity 160ms ease, transform 160ms ease;
}

.rocodeNotificationCenter .entryToast.is-leaving {
    opacity: 0;
    transform: translateX(14px);
}

.rocodeNotificationCenter .entryToastTitle {
    margin: 0 0 2px;
    color: #1e3a4d;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 18px;
}

.rocodeNotificationCenter .entryToastMessage {
    margin: 0;
    color: #526a79;
    font-family: inherit;
    font-size: 12px;
    font-weight: 560;
    line-height: 17px;
    white-space: pre-line;
}

.rocodeProjectStatus[hidden] {
    display: none;
}

.rocodeConfirmDialog {
    width: min(440px, calc(100vw - 32px));
    max-width: none;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 18px;
    color: #203d50;
    background: transparent;
    box-shadow: 0 24px 72px rgba(28, 46, 60, 0.28);
    font-family: var(--rocode-font-family);
}

.rocodeConfirmDialog::backdrop {
    background: rgba(29, 45, 58, 0.48);
    backdrop-filter: blur(2px);
}

.rocodeConfirmDialog[open] {
    animation: rocodeConfirmEnter 170ms ease-out both;
}

.rocodeConfirmSurface {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    padding: 24px;
    border: 1px solid rgba(176, 193, 207, 0.88);
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff 0%, #fbfcff 68%, #f3f1fb 100%);
}

.rocodeConfirmIcon {
    display: grid;
    width: 46px;
    height: 46px;
    border: 1px solid #efd6a7;
    border-radius: 14px;
    color: #9b6817;
    background: #fff6df;
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.58);
    font-size: 24px;
    font-weight: 800;
    place-items: center;
}

.rocodeConfirmCopy {
    min-width: 0;
}

.rocodeConfirmEyebrow {
    display: block;
    margin: 1px 0 4px;
    color: #6f7f9b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 13px;
    text-transform: uppercase;
}

.rocodeConfirmCopy h2 {
    margin: 0;
    color: #1f3b4e;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 27px;
}

.rocodeConfirmCopy p {
    margin: 8px 0 0;
    color: #58707f;
    font-size: 14px;
    font-weight: 520;
    line-height: 21px;
}

.rocodeConfirmActions {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 24px;
}

.rocodeConfirmActions button {
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.rocodeConfirmCancel {
    border-color: #cbd7e0 !important;
    color: #476071;
    background: #ffffff;
}

.rocodeConfirmCancel:hover {
    border-color: #aebfcb !important;
    background: #f5f8fa;
}

.rocodeConfirmAccept {
    color: #ffffff;
    background: var(--rocode-action);
    box-shadow: 0 4px 10px rgba(50, 96, 205, 0.2);
}

.rocodeConfirmAccept:hover {
    background: var(--rocode-action-hover);
}

.rocodeConfirmActions button:focus-visible {
    outline: 3px solid var(--rocode-focus);
    outline-offset: 2px;
}

@keyframes rocodeNotificationEnter {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
}

@keyframes rocodeConfirmEnter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rocodeProjectStatus,
    .rocodeNotificationCenter .entryToast,
    .rocodeConfirmDialog[open] {
        animation: none;
    }
}

@media (max-width: 520px) {
    .rocodeNotificationCenter {
        top: calc(var(--rocode-header-height) + 8px);
        right: 8px;
        width: calc(100vw - 16px);
    }

    .rocodeConfirmSurface {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 13px;
        padding: 20px;
    }

    .rocodeConfirmIcon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 21px;
    }

    .rocodeConfirmActions {
        flex-direction: column-reverse;
    }

    .rocodeConfirmActions button {
        width: 100%;
    }
}

@media (max-width: 1100px) {
    .rocodeFileControl {
        width: 48px;
        min-width: 48px;
        justify-content: center;
        padding: 0;
    }

    .rocodeFileControl .rocodeHeaderButtonLabel {
        display: none;
    }
}

@media (max-width: 1180px) {
    .rocodeAppHeader {
        padding-right: 10px;
        padding-left: 10px;
    }

    .roboThinkLogo {
        width: 148px;
        flex-basis: 148px;
    }

    .rocodeHeaderControls {
        gap: 8px;
    }

    .rocodeHeaderCodingGroup,
    .rocodeHeaderRunGroup,
    .rocodeHeaderActionGroup,
    .rocodeHeaderUtilityGroup {
        gap: 6px;
    }

    .rocodeHeaderActionGroup {
        padding-left: 0;
    }

    .rocodeHeaderUtilityGroup {
        gap: 4px;
    }
}

@media (max-width: 940px) {
    .roboThinkLogo {
        width: 126px;
        flex-basis: 126px;
    }

    .roboThinkLogo::after {
        left: 2px;
        width: 118px;
    }

}

@media (max-width: 720px) {
    .rocodeAppHeader {
        padding-right: 6px;
        padding-left: 6px;
    }

    .roboThinkLogo {
        width: 104px;
        flex-basis: 104px;
    }

    .roboThinkLogo::after {
        left: 0;
        width: 98px;
    }

    .rocodeHeaderControls,
    .rocodeHeaderCodingGroup,
    .rocodeHeaderRunGroup,
    .rocodeHeaderActionGroup,
    .rocodeHeaderUtilityGroup {
        gap: 4px;
    }

    .rocodeHeaderActionGroup {
        padding-left: 0;
    }

    .rocodeHeaderUtilityGroup {
        gap: 3px;
    }

}

@media (max-width: 560px) {
    .roboThinkLogo {
        display: none;
    }

    .rocodeProjectIdentity {
        overflow: hidden;
        width: auto;
        min-width: 64px;
        flex: 1 1 0;
        margin-left: 0;
        padding-right: 4px;
        padding-left: 4px;
    }

    .rocodeProjectSaveState,
    .rocodeProjectSaveState [data-project-save-label] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rocodeHeaderControls {
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    .rocodeHardwareControl,
    .rocodeHardwareControl[data-hardware-target='onboard'] {
        width: 36px;
        min-width: 36px;
        max-width: 36px;
        padding: 0;
    }
}

@media (max-width: 460px) {
    .rocodeProjectIdentity {
        display: none;
    }

}

.entry .entryTopFloatingView {
    z-index: 200;
    box-sizing: border-box;
    border-bottom: 0;
    background-image: var(--rocode-header-gradient);
    background-repeat: no-repeat;
    background-position: 0 calc(-1 * var(--rocode-header-height));
    background-size: 100% calc(var(--rocode-header-height) + 38px);
    box-shadow: inset 0 -1px 0 rgba(174, 192, 207, 0.72),
        0 2px 4px rgba(38, 62, 79, 0.07);
}

.entry .entryTopFloatingView .entrySceneWorkspace,
.entry .entryTopFloatingView .entryBlockCountView {
    background: transparent !important;
}

.entry .entrySceneWorkspace {
    position: relative;
}

.entry .entrySceneListWorkspace {
    max-width: calc(100% - 72px);
}

.entry .rocodeHistoryControls {
    display: flex;
    position: absolute;
    z-index: 20;
    top: 3px;
    right: 8px;
    height: 34px;
    align-items: center;
    gap: 2px;
    padding: 1px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}

.entry .rocodeHistoryButton {
    display: grid;
    width: 30px;
    height: 28px;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #486474;
    background: transparent;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease,
        transform 80ms ease;
}

.entry .rocodeHistoryIcon {
    width: 19px;
    height: 19px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.15;
}

.entry .rocodeHistoryButton:not(:disabled):hover {
    color: #245fc7;
    border-color: rgba(164, 185, 203, 0.7);
    background: rgba(255, 255, 255, 0.7);
}

.entry .rocodeHistoryButton:not(:disabled):active {
    color: #1f50ad;
    background: #e3edff;
    transform: translateY(1px);
}

#workspace .rocodeHistoryButton:disabled {
    border-color: transparent !important;
    color: #8fa3ae !important;
    background: transparent !important;
    cursor: default !important;
    opacity: 0.58;
}

.entry .rocodeHistoryButton:focus-visible {
    outline: 2px solid var(--rocode-focus) !important;
    outline-offset: -1px;
}

.rocodeHeaderHistorySlot {
    display: flex;
    position: relative;
    height: var(--rocode-header-control-height);
    align-items: center;
    margin-left: 2px;
    padding-left: 11px;
}

.rocodeHeaderHistorySlot::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 1px;
    width: 1px;
    background: rgba(139, 160, 177, 0.48);
    content: '';
}

.entry .rocodeHeaderHistorySlot .rocodeHistoryControls {
    position: static;
    z-index: auto;
    height: var(--rocode-header-control-height);
    gap: 6px;
    padding: 0;
}

.entry .rocodeHeaderHistorySlot .rocodeHistoryButton {
    width: var(--rocode-header-control-height);
    height: var(--rocode-header-control-height);
    border: 1px solid rgba(167, 185, 199, 0.72);
    border-radius: 50%;
    color: #4f6c7e;
    background: rgba(255, 255, 255, 0.72);
}

.entry .rocodeHeaderHistorySlot .rocodeHistoryButton:not(:disabled):hover {
    border-color: #adc2ce;
    color: #245fc7;
    background: #ffffff;
}

#workspace .rocodeHeaderHistorySlot .rocodeHistoryButton:disabled {
    border-color: rgba(181, 197, 208, 0.7) !important;
    color: #91a4af !important;
    background: rgba(255, 255, 255, 0.5) !important;
    opacity: 1;
}

@media (max-width: 460px) {
    .rocodeHeaderControls,
    .rocodeHeaderActionGroup,
    .rocodeHeaderCodingGroup {
        gap: 3px;
    }

    .rocodeHeaderUtilityGroup {
        gap: 2px;
    }

    .rocodeProgramModeControl {
        width: 42px;
        min-width: 42px;
        max-width: 42px;
    }

    .rocodeProgramModeControl::before,
    .rocodeFileControl::before {
        left: 6px;
    }

    .rocodeProgramModeControl::after,
    .rocodeFileControl::after,
    .rocodeHelpControl::after {
        right: 5px;
    }

    .rocodeFileControl {
        width: 42px;
        min-width: 42px;
    }

    .rocodeLanguageControl {
        width: 44px;
        min-width: 44px;
        padding: 0 13px 0 3px;
    }

    .rocodeLanguageControl::after {
        right: 5px;
    }

    .rocodeHelpControl {
        width: 38px;
        min-width: 38px;
    }

    .rocodeHelpControl::before {
        left: 6px;
    }

    .rocodeHeaderHistorySlot {
        margin-left: 1px;
        padding-left: 8px;
    }

    .entry .rocodeHeaderHistorySlot .rocodeHistoryControls {
        gap: 4px;
    }

    .entry .rocodeHeaderHistorySlot .rocodeHistoryButton {
        width: 32px;
        height: 32px;
    }

    .rocodeHeaderControl .rocodeProgramModeMenu,
    .rocodeHeaderControl .rocodeHeaderMenu[data-header-menu='file'] {
        right: auto;
        left: 0;
    }
}

@media (max-width: 340px) {
    .rocodeLanguageGroup {
        display: none;
    }
}

.entry .entrySceneInputCover {
    height: 34px;
    margin-top: 2px;
    padding-top: 5px;
    border: 1px solid transparent;
    border-radius: 9px;
    background-color: transparent;
    transition: border-color 120ms ease, background-color 120ms ease,
        box-shadow 120ms ease;
}

.entry .entrySceneInputCover:hover {
    background-color: rgba(255, 255, 255, 0.62);
}

.entry .entrySceneFieldWorkspace {
    color: #5b7181;
}

.entry .selectedScene .entrySceneInputCover {
    position: relative;
    z-index: 2;
    height: 38px;
    margin-top: 0;
    padding-top: 7px;
    border-color: #c6d5dd;
    border-bottom-color: #ffffff;
    border-radius: 9px 9px 0 0;
    background-color: #ffffff;
    box-shadow: 0 -1px 2px rgba(30, 52, 68, 0.045);
}

.entry .selectedScene .entrySceneFieldWorkspace {
    color: #245fc7;
    font-size: 13px;
    font-weight: 700;
}

.entry .selectedScene .entrySceneRemoveButtonWorkspace {
    z-index: 3;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background-color: transparent;
    background-image: none !important;
    filter: none;
    transition: background-color 120ms ease, transform 80ms ease;
}

.entry .selectedScene .entrySceneRemoveButtonWorkspace::before,
.entry .selectedScene .entrySceneRemoveButtonWorkspace::after {
    position: absolute;
    top: 13px;
    left: 8px;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background-color: #688099;
    content: '';
}

.entry .selectedScene .entrySceneRemoveButtonWorkspace::before {
    transform: rotate(45deg);
}

.entry .selectedScene .entrySceneRemoveButtonWorkspace::after {
    transform: rotate(-45deg);
}

.entry .selectedScene .entrySceneRemoveButtonWorkspace:hover {
    background-color: #e8f0ff;
}

.entry .selectedScene .entrySceneRemoveButtonWorkspace:hover::before,
.entry .selectedScene .entrySceneRemoveButtonWorkspace:hover::after {
    background-color: #3568e6;
}

.entry .selectedScene .entrySceneRemoveButtonWorkspace:active {
    background-color: #dce8ff;
    transform: translateY(1px);
}

.entry .selectedScene .entrySceneRemoveButtonWorkspace:focus-visible {
    outline: 2px solid var(--rocode-focus);
    outline-offset: -2px;
}

.entry .entryTopFloatingView .entryBlockCountView .blockCountView {
    display: inline-flex;
    height: 34px;
    align-items: center;
    padding: 0 7px;
    border: 0;
    border-radius: 0;
    color: #617786;
    background-color: transparent;
    box-shadow: none;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
}

.entry .entrySceneAddButtonWorkspace {
    width: 30px;
    height: 30px;
    margin: 4px 0 0 6px;
    border: 1px solid transparent;
    border-radius: 50%;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    transition: border-color 120ms ease, background-color 120ms ease,
        transform 80ms ease;
}

.entry .entrySceneAddButtonWorkspace::before,
.entry .entrySceneAddButtonWorkspace::after {
    position: absolute;
    top: 13px;
    left: 8px;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: #3568e6;
    content: '';
}

.entry .entrySceneAddButtonWorkspace::after {
    transform: rotate(90deg);
}

.entry .entrySceneAddButtonWorkspace:hover {
    border-color: #bed0db;
    background-color: rgba(255, 255, 255, 0.78);
}

.entry .entrySceneAddButtonWorkspace:active {
    background-color: #dfeaff;
    transform: translateY(1px);
}

.entry .entrySceneAddButtonWorkspace:focus-visible {
    outline: 2px solid var(--rocode-focus);
    outline-offset: 1px;
}

/* 임시 스타일입니다. https://github.com/entrylabs/entryjs/pull/2723 머지 이후에 필요가 없습니다. begin  */
* {
    box-sizing: border-box;
}

img,
fieldset,
button {
    border: 0;
}

.blind {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
}

.entryPlaygroundPainter {
    position: absolute;
    left: 253px;
    top: 0;
    bottom: 0;
    right: 0;
    border-left: none;
    background-color: #f9f9f9;
    &.fullscreen {
        min-height: 547px;
        top: 0;
        left: 0;
        z-index: 251;
    }

    .ControlPanel {
        button {
            vertical-align: top;
        }
    }
}

.table-modal {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
}
/* 임시 스타일입니다. https://github.com/entrylabs/entryjs/pull/2723 머지 이후에 필요가 없습니다. end  */

/* Use RoCode's clean soccer-ball artwork for the Object Detection card.
 * Entry's bundled thumbnail includes a Korean detection label baked into the SVG. */
[style*="/aiUtilize/objectDetector.svg"] {
    background-image: url("../assets/characters/soccer-ball.png") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 104px 104px !important;
}

/* Picture editor save progress */
.rocodeSaveProgressOverlay {
    position: fixed;
    z-index: 4000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(18, 30, 52, 0.38);
    backdrop-filter: blur(2px);
}

.rocodeSaveProgressOverlay[hidden] {
    display: none;
}

.rocodeSaveProgress {
    display: flex;
    width: min(380px, calc(100vw - 48px));
    min-height: 390px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 26px 28px 18px;
    border: 1px solid rgba(38, 54, 128, 0.14);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 24px 64px rgba(20, 35, 70, 0.24);
}

.rocodeSaveProgressBubble {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 250px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 17px 22px;
    border: 3px solid #27377f;
    border-radius: 20px;
    background: #fff;
    color: #202944;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.rocodeSaveProgressBubble::before,
.rocodeSaveProgressBubble::after {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    content: '';
    transform: translateX(-50%);
}

.rocodeSaveProgressBubble::before {
    border-width: 17px 15px 0;
    border-color: #27377f transparent transparent;
}

.rocodeSaveProgressBubble::after {
    margin-top: -4px;
    border-width: 14px 12px 0;
    border-color: #fff transparent transparent;
}

.rocodeSaveProgressDots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.rocodeSaveProgressDots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4f7dff;
    animation: rocodeSaveDot 900ms ease-in-out infinite;
}

.rocodeSaveProgressDots i:nth-child(2) {
    animation-delay: 120ms;
}

.rocodeSaveProgressDots i:nth-child(3) {
    animation-delay: 240ms;
}

.rocodeSaveProgressCharacter {
    display: block;
    width: 260px;
    height: auto;
    margin-top: 18px;
    animation: rocodeSaveTori 1.8s ease-in-out infinite;
    filter: drop-shadow(0 10px 10px rgba(34, 48, 104, 0.14));
}

/* Keep the full Malay variable label readable in the compact Attribute grid. */
html[lang='ms'] .entryVariableSelectButtonWorkspace.variable div {
    padding-left: 0;
}

html[lang='ms'] .entryVariableSelectButtonWorkspace.variable div::before {
    left: 7px;
}

html[lang='ms'] .entryVariableSelectButtonWorkspace.variable .text {
    display: flex;
    align-items: center;
    height: 40px;
    margin: 0 4px 0 30px;
    line-height: 13px;
    white-space: normal;
}

@keyframes rocodeSaveDot {
    0%,
    60%,
    100% {
        opacity: 0.35;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

@keyframes rocodeSaveTori {
    0%,
    100% {
        transform: translateY(0) rotate(-0.5deg);
    }
    50% {
        transform: translateY(-6px) rotate(0.5deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rocodeSaveProgressDots i,
    .rocodeSaveProgressCharacter {
        animation: none;
    }
}