/* Arabic-only layout. This stylesheet must follow styles.css/header-artwork.css.
 * Mirror region placement, never the page, media, canvas, or an SVG group. */
@font-face {
    font-family: 'Noto Sans Arabic';
    src: url('../assets/fonts/NotoSansArabic-Variable.ttf') format('truetype');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

html[dir='rtl'] {
    --rocode-font-family: 'Noto Sans Arabic', 'Pretendard', 'Segoe UI', sans-serif;
}

html[dir='rtl'] body,
html[dir='rtl'] :is(button, input, textarea, select),
html[dir='rtl'] #workspace :is(.entryObjectNameWorkspace, .entrySceneFieldWorkspace),
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) {
    font-family: var(--rocode-font-family) !important;
}

html[dir='rtl'] [dir='ltr'] { direction: ltr; unicode-bidi: isolate; }
html[dir='rtl'] [dir='auto'] { unicode-bidi: isolate; }
html[dir='rtl'] :is(input, textarea)[dir='auto'] { text-align: start; }
html[dir='rtl'] :is(code, kbd, [data-rocode-ltr]) { direction: ltr; unicode-bidi: isolate; }

/* Two-row header: preserve the exact robot artwork, only move the controls. */
html[dir='rtl'] .rocodeAppHeader { direction: rtl; }
html[dir='rtl'].rocodeArtworkHeader {
    /* Anchor the art before the right-side project identity at every width.
     * Use viewport units, not background-position's image-relative percent. */
    --header-artwork-art-x: calc(100vw - 1230px);
}
html[dir='rtl'].rocodeArtworkHeader .rocodeAppHeader {
    padding-left: var(--header-artwork-control-inset);
    padding-right: 16px;
}
html[dir='rtl'] .rocodeProjectIdentity {
    margin-left: 0;
    margin-right: 10px;
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.35);
}
html[dir='rtl'].rocodeArtworkHeader .rocodeProjectIdentity { border-right-color: transparent; }
html[dir='rtl'] .rocodeProjectName { text-align: start; }
html[dir='rtl'] .rocodeHeaderHistorySlot {
    margin-left: 0;
    margin-right: 2px;
    padding-left: 0;
    padding-right: 11px;
}
html[dir='rtl'] .rocodeHeaderHistorySlot::before { left: auto; right: 1px; }
html[dir='rtl'] .rocodeHeaderButton::before { left: auto; right: 11px; }
html[dir='rtl'] .rocodeHeaderButton::after { right: auto; left: 10px; }
html[dir='rtl'] .rocodeFileControl { padding: 0 36px 0 25px; }
html[dir='rtl'] :is(.rocodeFileControl, .rocodeHelpControl)::before { left: auto; right: 8px; }
html[dir='rtl'] :is(.rocodeHelpControl, .rocodeLanguageControl)::after { right: auto; left: 7px; }
html[dir='rtl'] .rocodeLanguageControl { padding-right: 5px; padding-left: 15px; }
html[dir='rtl'] .rocodeZoomControl { padding: 0 32px 0 18px; }
html[dir='rtl'] .rocodeZoomControl::before { right: 9px; }
html[dir='rtl'] .rocodeHeaderMenu { right: auto; left: 0; text-align: start; }
html[dir='rtl'] .rocodeHeaderMenu button { text-align: start; }
html[dir='rtl'] .rocodeHeaderMenu button::after { float: left; }
html[dir='rtl'] .rocodeZoomOption { padding-left: 34px; padding-right: 10px; text-align: start; }
html[dir='rtl'] .rocodeZoomOption::after { right: auto; left: 12px; }

/* Scene order follows document order from the right, without reordering IDs. */
html[dir='rtl'] .entryTopFloatingView { direction: rtl; }
html[dir='rtl'] .entrySceneListWorkspace { float: right; padding-left: 0; padding-right: 26px; }
html[dir='rtl'] .entrySceneListWorkspace .sortableItem { direction: rtl; }
html[dir='rtl'] .entrySceneAddButtonWorkspace { float: right; margin-left: 6px; margin-right: 0; }
html[dir='rtl'] .entrySceneRemoveButtonWorkspace { right: auto; left: 0; }
html[dir='rtl'] .selectedScene .entrySceneRemoveButtonWorkspace { right: auto; left: 5px; }
html[dir='rtl'] .entrySceneInputCover { padding-left: 28px; padding-right: 10px; }
html[dir='rtl'].rocodeArtworkHeader .entryTopFloatingView .blockCountView {
    margin-left: var(--header-artwork-control-inset);
    margin-right: 0;
}
html[dir='rtl'] .entry .rocodeHistoryControls { right: auto; left: 8px; }
html[dir='rtl'] .rocodeHeaderHistorySlot .rocodeHistoryControls { left: auto; }

/* Stage and property rail on the right. Width remains owned by Entry. */
html[dir='rtl'] #workspace > .engineContainer {
    float: right;
    padding-left: 16px;
    padding-right: 8px;
}
html[dir='rtl'] #workspace.rocodeAdaptiveWorkspace[data-stage-panel='collapsed'] > .engineContainer {
    border-right: 0;
    border-left: 1px solid #d7e2e8;
}
html[dir='rtl'] #workspace .entryObjectSelectedImgWorkspace { right: auto; left: 0; }
html[dir='rtl'] #workspace .propertyPanel { left: 16px; right: 0; }
html[dir='rtl'] #workspace .propertyTab { margin-right: 0; margin-left: auto; }
html[dir='rtl'] #workspace :is(.propertyContent, .rocodeMainboardPanel, .rocodeSensorPanel) {
    left: 0;
    right: 25px;
    border-radius: 6px 0 6px 6px;
    text-align: start;
}
html[dir='rtl'] #workspace .entryObjectWrapperWorkspace { margin-left: 72px; margin-right: 88px; }
html[dir='rtl'] #workspace .entryObjectThumbnailWorkspace { left: auto; right: 38px; }
html[dir='rtl'] #workspace .objectInfoView { float: right; margin-left: 0; margin-right: 6px; }
html[dir='rtl'] #workspace .entryObjectInformationWorkspace { right: auto; left: 36px; }
html[dir='rtl'] #workspace .entryObjectDeleteWorkspace { right: auto; left: 4px; }
/* Entry hides its native scrollbar using a right-side 15px gutter. Keep that
 * scroll shell LTR so it does not offset the entire card outside its clip. */
html[dir='rtl'] #workspace .entryContainerListWorkspace [class*='customScrollWrapper__'] { direction: ltr; }
html[dir='rtl'] #workspace .entryContainerListElementWorkspace { direction: rtl; }
/* Physical/paired controls retain their familiar order: Add then Run,
 * X then Y, rotation then direction, and the three rotation modes. */
html[dir='rtl'] #workspace :is(.entryEngineButtonWrapper,
    .entryObjectCoordinateWorkspace, .entryObjectRotateLabelWrapperWorkspace,
    .rotationMethodWrapper) { direction: ltr; }
html[dir='rtl'] #workspace :is(.entryRunButtonWorkspace_w, .entryStopButtonWorkspace_w,
    .entryAddButtonWorkspace_w) { direction: rtl; }
html[dir='rtl'] #workspace :is(.entryObjectCoordinateSizeWorkspace,
    .entryObjectRotateSpanWorkspace, .entryObjectDirectionSpanWorkspace,
    .entryObjectRotateMethodLabelWorkspace) { direction: rtl; }
html[dir='rtl'] #workspace :is(.entryRunButtonWorkspace_w, .entryStopButtonWorkspace_w,
    .entryAddButtonWorkspace_w)::before { margin-right: 0; margin-left: 8px; }
/* Variable/list group headers use an absolutely positioned folder icon.
 * Entry's LTR rule pins it to the right, where it covers the opening Arabic
 * word. Put the disclosure icon at the RTL trailing edge and reserve that
 * space so long labels and their counts cannot run underneath it. */
html[dir='rtl'] #workspace .entryVariableSplitterWorkspace .attr_link {
    padding: 0 12px 0 50px;
    text-align: right;
}
html[dir='rtl'] #workspace .entryVariableSplitterWorkspace .attr_link::after {
    right: auto;
    left: 14px;
}
html[dir='rtl'] :is(.rocodeSensorMeter, .rocodeSensorPinNumber, .rocodeSensorValueCard output,
    .rocodeLiveOutputCard output, .rocodeFirmwareSerialField) { direction: ltr; unicode-bidi: isolate; }
html[dir='rtl'] .rocodeFirmwareSerialField { text-align: left; }
html[dir='rtl'] .rocodeSensorMapSummary::after { margin-left: 0; margin-right: auto; transform: rotate(135deg); }
html[dir='rtl'] .rocodeSensorMapCard[open] .rocodeSensorMapSummary::after { transform: rotate(45deg); }

/* Editor region order: canvas | palette | categories | stage.
 * Positive, LTR SVG coordinates are retained within board/menu surfaces. */
html[dir='rtl'] #workspace > .entryPlaygroundWorkspace { direction: rtl; }
html[dir='rtl'] #workspace .entryPlaygroundTabWorkspace { left: auto; right: 0; }
html[dir='rtl'] #workspace .entryWorkspaceBlockMenu { left: auto; right: 0; direction: rtl; white-space: nowrap; }
html[dir='rtl'] #workspace .entryCategoryListWorkspace { vertical-align: top; direction: rtl; }
html[dir='rtl'] #workspace .blockMenuContainer { position: relative; border-left: 1px solid #d6e9f4; border-right: 0; }
html[dir='rtl'] #workspace .blockMenuWrapper,
html[dir='rtl'] #workspace .blockMenuWrapper svg.blockMenu { position: absolute; left: auto; right: 0; direction: ltr; }
html[dir='rtl'] #workspace .entryWorkspaceBoard { left: 0 !important; right: 254px; direction: ltr; }
html[dir='rtl'] #workspace .entryWorkspaceBoard:not(.wideView) { right: calc(var(--rocode-category-width) + 254px); }
html[dir='rtl'] #workspace .entryPlaygroundResizeWorkspace { left: auto !important; right: calc(var(--rocode-category-width) + 252px); transform: rotate(180deg); }
html[dir='rtl'] #workspace .entryPlaygroundResizeWorkspace.folding { animation-name: rocodeRtlFoldMenuHandle; }
html[dir='rtl'] #workspace .entryPlaygroundResizeWorkspace.unfolding { animation-name: rocodeRtlUnfoldMenuHandle; }
html[dir='rtl'] #workspace .entryWorkspaceBoard:not(.wideView).folding { animation-name: rocodeRtlFoldMenuBoard; }
html[dir='rtl'] #workspace .entryWorkspaceBoard:not(.wideView).foldOut { animation-name: rocodeRtlUnfoldMenuBoard; }
@keyframes rocodeRtlFoldMenuHandle {
    from { right: calc(var(--rocode-category-width) + 252px); }
    to { right: var(--rocode-category-width); }
}
@keyframes rocodeRtlUnfoldMenuHandle {
    from { right: var(--rocode-category-width); }
    to { right: calc(var(--rocode-category-width) + 252px); }
}
@keyframes rocodeRtlFoldMenuBoard {
    from { right: calc(var(--rocode-category-width) + 254px); }
    to { right: calc(var(--rocode-category-width) + 1px); }
}
@keyframes rocodeRtlUnfoldMenuBoard {
    from { right: calc(var(--rocode-category-width) + 1px); }
    to { right: calc(var(--rocode-category-width) + 254px); }
}
html[dir='rtl'] #workspace .entryPlaygroundButtonTabWorkspace { right: auto; left: 8px; }
html[dir='rtl'].rocodeArtworkHeader #workspace .rocodeBlockToolbar.entryPlaygroundButtonTabWorkspace {
    right: auto;
    left: var(--header-artwork-control-inset);
    padding-left: 0;
    padding-right: max(0px, calc(var(--header-artwork-control-inset) - 8px));
}
html[dir='rtl'] .rocodeBlockZoomTools { margin-right: 0; margin-left: 2px; padding-right: 0; padding-left: 8px; border-right: 0; border-left: 1px solid #d6e9f4; }

/* Shape/sound lists change side; image geometry and audio time remain LTR. */
html[dir='rtl'] #workspace :is(.entryPlaygroundSoundList, .entryPlaygroundPictureList) { left: auto; right: 0; }
html[dir='rtl'] #workspace :is(.entryPlaygroundAddSound, .entryPlaygroundAddPicture) { margin-left: auto; margin-right: 0; }
html[dir='rtl'] #workspace :is(.entryPlaygroundSoundEdit, .entryPlaygroundPainter) { left: 0; right: 253px; }
html[dir='rtl'] #workspace .entryPlaygroundPainter.fullscreen { right: 0; }
/* Entry Paint uses physical canvas/tool coordinates and static absolute
 * positions. It must not inherit RTL from the surrounding costume list. */
html[dir='rtl'] #workspace .entryPlaygroundPainter { direction: ltr; text-align: left; }
html[dir='rtl'] #workspace .entryPlaygroundPainter .MainContainer {
    direction: ltr;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
}
/* Native Paint reserves fixed 117px/98px toolbar heights. Arabic labels and
 * vector controls can need another row in a narrow editor; grid allocates
 * their real heights without scaling or reversing the drawing coordinate
 * system, and keeps the canvas clear of both toolbars. */
html[dir='rtl'] #workspace .entryPlaygroundPainter .top_area { grid-column: 1 / -1; min-width: 0; }
html[dir='rtl'] #workspace .entryPlaygroundPainter .ControlPanel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: 62px;
    padding-right: 10px;
}
html[dir='rtl'] #workspace .entryPlaygroundPainter .ControlPanel > * { flex: 0 0 auto; }
html[dir='rtl'] #workspace .entryPlaygroundPainter .ControlPanel .CoordinateComp { position: static; }
html[dir='rtl'] #workspace .entryPlaygroundPainter .withControlBtnWrapper {
    height: auto;
    min-height: 60px;
    padding: 40px 0 4px;
    vertical-align: top;
}
html[dir='rtl'] #workspace .entryPlaygroundPainter .withControlBtnWrapper > .icon { left: 0; }
html[dir='rtl'] #workspace .entryPlaygroundPainter .withControlBtnWrapper > .label {
    position: static;
    display: block;
    line-height: 16px;
    white-space: normal;
    direction: rtl;
}
html[dir='rtl'] #workspace .entryPlaygroundPainter .ControlPanel > .right_area {
    float: none;
    margin: 4px 0 4px auto;
}
html[dir='rtl'] #workspace .entryPlaygroundPainter .MainContainer .side_area {
    position: relative;
    grid-column: 1;
    grid-row: 2 / 4;
    inset: auto;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
}
html[dir='rtl'] #workspace .entryPlaygroundPainter .MainContainer .canvas_area {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    inset: auto;
    min-width: 0;
    min-height: 0;
}
html[dir='rtl'] #workspace .entryPlaygroundPainter .MainContainer .bottom_area {
    position: relative;
    grid-column: 2;
    grid-row: 3;
    inset: auto;
    min-width: 0;
}
html[dir='rtl'] #workspace :is(.entryPlaygroundSoundElement, .entryPlaygroundPictureElement) { padding-left: 56px; padding-right: 64px; }
html[dir='rtl'] #workspace :is(.entryPlaygroundSoundThumbnail, .entryPlaygroundPictureThumbnail) { left: auto; right: 16px; }
html[dir='rtl'] #workspace :is(.entryPlaygroundSoundOrder, .entryPlaygroundPictureOrder) { left: auto; right: 19px; }
html[dir='rtl'] #workspace .entryPlayground_del { right: auto; left: 26px; }
html[dir='rtl'] #workspace :is(.entryPlaygroundPictureName, .entryPlaygroundSoundName) { line-height: 22px; }
html[dir='rtl'] #workspace .entryPlaygroundTextWorkspace .write_set :is(.pop_selectbox, .font_style_box) { float: right; }
html[dir='rtl'] #workspace .entryPlaygroundTextWorkspace .write_set .font_style_box { padding-left: 0; padding-right: 24px; }

/* Libraries are generated by Entry Tool. Semantic class prefixes cover its
 * bundled copies, whose CSS-module suffixes differ for each tool package. */
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='pop_header__'] { padding-left: 16px; padding-right: 68px; }
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='pop_header__'] [class*='btn_back__'] { left: auto; right: 12px; }
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='pop_header__'] [class*='btn__'] { right: auto; left: 16px; }
/* Entry wraps the header action in a div, and places its vector-only filter
 * absolutely at the LTR end. Allocate space in flow so neither can cover the
 * Arabic title, close button, or the right-leading subcategory labels. */
html[dir='rtl'] #EntryPopupContainer [class*='sub_tab__'] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    height: auto;
    min-height: 34px;
}
html[dir='rtl'] #EntryPopupContainer [class*='sub_tab__'] [class*='menu_inner__'] {
    flex: 1 1 300px;
    min-width: 0;
    height: auto;
    white-space: normal;
}
html[dir='rtl'] #EntryPopupContainer [class*='sub_tab__'] [class*='menu_inner__'] > :is(a, div) {
    margin-left: 0;
    margin-right: 20px;
}
html[dir='rtl'] #EntryPopupContainer [class*='sub_tab__'] [class*='menu_inner__'] > :is(a, div):first-of-type {
    margin-right: 0;
}
html[dir='rtl'] #EntryPopupContainer [class*='sub_tab__'] [class*='checkbox__'] {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    margin: 0;
}
/* Shared by sound, image/object and table uploads. Keep each warning symbol
 * beside the start of its Arabic message rather than across the whole panel. */
html[dir='rtl'] #EntryPopupContainer [class*='caution_box__'] [class*='caution__'] {
    padding-left: 0;
    padding-right: 24px;
}
html[dir='rtl'] #EntryPopupContainer [class*='caution_box__'] [class*='caution__']::before {
    left: auto;
    right: 0;
}
html[dir='rtl'] #EntryPopupContainer [class*='caution_box__'] [class*='caution__'] > a {
    margin-left: 0;
    margin-right: 6px;
}
html[dir='rtl'] #EntryPopupContainer [class*='file_add_list_content__'] [class*='file_add_box__'] {
    left: auto;
    right: 0;
}
html[dir='rtl'] #EntryPopupContainer [class*='file_add_list_content__'] [class*='obj_list__'] {
    margin: -12px -16px 0 0;
}
html[dir='rtl'] #EntryPopupContainer [class*='file_add_list_content__'] [class*='obj_list__'] li:first-of-type {
    margin-left: 0;
    margin-right: 154px;
}
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='menu_list__'] { margin-right: 0; margin-left: 24px; }
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='section_navi__'] [class*='list__'],
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='section_navi__'] [class*='list__'] li { float: right; }
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='section_navi__'] [class*='list__'] li { margin-left: 0; margin-right: -1px; }
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='section_navi__'] [class*='list__'] li:first-child { margin-right: 0; border-radius: 0 4px 4px 0; }
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='section_navi__'] [class*='list__'] li:last-child { border-radius: 4px 0 0 4px; }
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='srch_box__'] { right: auto; left: 18px; padding-left: 45px; padding-right: 12px; }
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='btn_srch__'] { right: auto; left: 12px; }
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='art_sel_area__'] { float: left; }
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='art_sel_area__'] [class*='srch_box__'] { float: right; left: 0; margin-left: 0; margin-right: 12px; }
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='obj_list__'] { margin-left: 0; margin-right: -16px; }
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='obj_list__'] li { float: right; margin-left: 0; margin-right: 16px; }
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='obj_select_cont__'] { margin-left: 0; margin-right: 62px; padding-left: 0; padding-right: 18px; }
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='obj_select_cont__'] [class*='btn_del__'] { right: auto; left: -8px; }
html[dir='rtl'] :is(#EntryPopupContainer, #EntryModalContainer, #EntryListContainer) [class*='obj_list__'] [class*='check__'] { left: auto; right: 6px; }

/* Dialogs/cards inherit RTL flex/grid order. Retain existing focus and events. */
html[dir='rtl'] :is(.rocodeAboutDialog, .rocodeUsbDriversDialog, .rocodeOnBoardWizardDialog,
    .rocodeConfirmDialog, .rocodeHeaderMenu) { text-align: start; }
html[dir='rtl'] .rocodeOnBoardWizardSteps li:not(:last-child)::after { left: auto; right: calc(50% + 16px); }
html[dir='rtl'] :is(.rocodeAboutLegal, [data-about-notices], [data-driver-license]) { direction: ltr; text-align: left; unicode-bidi: isolate; }
html[dir='rtl'] .rocodeNotificationCenter { right: auto; left: 14px; }
html[dir='rtl'] :is(.rocodeProjectStatus, .rocodeNotificationCenter .entryToast) { padding-left: 42px; padding-right: 48px; border-right: 4px solid #4c9565; border-left: 1px solid #cbd8e3; }
html[dir='rtl'] :is(.rocodeProjectStatus[data-type='neutral'], .rocodeNotificationCenter .entryToastWarning) { border-right-color: #d2932d; }
html[dir='rtl'] :is(.rocodeProjectStatus[data-type='error'], .rocodeNotificationCenter .entryToastAlert) { border-right-color: #c7544e; }
html[dir='rtl'] :is(.rocodeProjectStatus, .rocodeNotificationCenter .entryToast)::before { left: auto; right: 13px; }
html[dir='rtl'] .rocodeNotificationDismiss { right: auto; left: 9px; }
html[dir='rtl'] .rocodeNotificationCenter .entryToast.is-leaving { transform: translateX(-14px); }

/* Same-origin painter/sound iframe documents receive this same stylesheet.
 * Do not apply it to the wizard's instructional animation iframe. */
html[dir='rtl'][data-rocode-rtl-editor-frame] body { direction: rtl; text-align: start; }
html[dir='rtl'][data-rocode-rtl-editor-frame='picture'] body { direction: ltr; text-align: left; }
html[dir='rtl'][data-rocode-rtl-editor-frame] :is(button, label, select) { font-family: var(--rocode-font-family) !important; }
html[dir='rtl'][data-rocode-rtl-editor-frame] :is(canvas, svg, pre, code,
    [class*='waveform'], [class*='Waveform'], [class*='timeline'], [class*='Timeline']) { direction: ltr; unicode-bidi: isolate; }

@media (max-width: 720px) {
    html[dir='rtl'].rocodeArtworkHeader .rocodeAppHeader { padding-right: 6px; }
}
@media (max-width: 560px) {
    html[dir='rtl'] .rocodeProjectIdentity { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    html[dir='rtl'] #workspace .entryPlaygroundResizeWorkspace:is(.folding, .unfolding),
    html[dir='rtl'] #workspace .entryWorkspaceBoard:not(.wideView):is(.folding, .foldOut) {
        /* Entry relies on animationend even when the movement is suppressed. */
        animation-duration: 1ms !important;
    }
}