@import url('./color-picker.css');
/* The editor's shared visual system. Website content keeps its compiled styles. */
:root {
  --ui-ink:#203b59; --ui-muted:#5b6f82; --ui-line:#dce2e6;
  --ui-blue:#2468d4; --ui-blue-soft:#edf4ff; --ui-green:#18794e;
  --ui-paper:#fffefb; --ui-desk:#f0eee6; --ui-radius:8px;
  --rocode-action:var(--ui-blue); --rocode-focus:#185bbb;
  --rocode-font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
/* One quiet project header; the logo and student work supply the character. */
.rocodeHeader { color:var(--ui-ink); background:#fffefb; border-top:4px solid #4886dc; border-bottom:1px solid var(--ui-line); }
.rocodeAppHeader { height:68px; padding:0 20px; gap:8px; }
.roboThinkLogo { width:142px; flex-basis:142px; height:44px; border-radius:0; }
.roboThinkLogo:after { width:132px; height:30px; top:7px; left:0; }
.rocodeProjectIdentity { width:clamp(180px,24vw,340px); flex-basis:340px; min-width:140px; height:56px; margin-left:12px; padding:0 16px; border-left:1px solid var(--ui-line); gap:2px; }
.rocodeProjectName { height:30px; font-size:19px; font-weight:700; color:var(--ui-ink); border-radius:5px; }
.rocodeProjectName:hover { color:var(--ui-ink); background:#eef4fb; border-color:#bed0e6; }
.rocodeProjectName:focus { background:#fff; color:var(--ui-ink); outline:2px solid var(--ui-blue); }
.rocodeProjectSaveState { color:#587061; font-size:12px; line-height:17px; gap:6px; }
.save-dot { width:6px; height:6px; background:#228458; box-shadow:none; }
.rocodeHeaderButton { height:44px; min-height:44px; padding:0 12px; gap:7px; border:1px solid transparent; border-radius:8px; color:var(--ui-ink); background:transparent; box-shadow:none; backdrop-filter:none; font-size:16px; }
.rocodeHeaderButton:hover,.rocodeHeaderButton[aria-expanded=true] { color:#164c92; background:var(--ui-blue-soft); border-color:#cbdcf4; }
.rocodeHeaderButton.publish-button { border-color:#bad0ed; color:#1857ad; background:#f1f6ff; }
.rocodeHeaderButton.publish-button:hover { background:#e3eeff; border-color:#88ace0; }
.rocodeHeaderButton .ui-icon { width:20px; height:20px; }
.rocodeHeaderButton img { filter:none; }
.rocodeHeaderMenu { top:50px; width:292px; padding:8px; border-color:var(--ui-line); border-radius:12px; box-shadow:0 8px 28px #203b5926; }
.rocodeHeaderMenu button { min-height:46px; padding:11px 12px; font-size:16px; gap:12px; color:var(--ui-ink); }
.rocodeHeaderMenu button:hover { background:var(--ui-blue-soft); }
.rocodeHeaderMenu kbd { font-size:12px; }
.rocodeHeaderMenu .ui-icon { color:#426a97; }
.projects-intro { display:flex; align-items:center; gap:20px; margin-bottom:22px; }
.projects-intro .dialog-intro { margin:0; flex:1; }
.projects-intro .primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; flex-shrink:0; min-height:46px; padding:11px 16px; font-size:16px; border-radius:8px; }
.projects-grid .project-card[aria-current=true] { border-color:#7da1d1; background:#edf4ff; box-shadow:inset 0 0 0 1px #7da1d1; }
/* Navigation has stable slots and a single next-step action. */
.builder-workspace { --builder-line:var(--ui-line); color:var(--ui-ink); }
.builder-workspace .builder-toolbar { height:64px; min-height:64px; padding:8px 20px; gap:16px; grid-template-columns:auto auto minmax(0,1fr) 166px; background:#fffefb; border-bottom:1px solid var(--ui-line); }
.builder-workspace .builder-views { display:flex; padding:3px; gap:2px; border:1px solid #e0e5ea; border-radius:9px; background:#f1f4f7; }
.builder-workspace .builder-views button { display:flex; align-items:center; justify-content:center; gap:8px; min-width:112px; height:44px; min-height:44px; padding:8px 12px; border:1px solid transparent; border-radius:6px; background:transparent; color:#52667b; font-size:16px; box-shadow:none; }
.builder-workspace .builder-views button[aria-selected=true] { background:#fff; color:#1c59ac; border-color:#c5d4e7; box-shadow:0 1px 2px #203b5910; }
.builder-workspace .builder-history { gap:4px; padding-left:12px; border-left:1px solid var(--ui-line); }
.builder-workspace .builder-history button { display:flex; align-items:center; justify-content:center; gap:7px; min-width:82px; height:44px; border:1px solid transparent; background:transparent; border-radius:8px; color:#3c5774; font-size:15px; padding:8px; box-shadow:none; }
.builder-workspace .builder-history button:hover:not(:disabled) { background:#edf4fc; border-color:#d2e0ef; }
.builder-workspace .builder-history button:disabled { background:transparent; border-color:transparent; color:#8a949d; opacity:1; box-shadow:none; }
.builder-workspace .builder-preview-action { width:166px; }
.builder-workspace .builder-preview-action button { height:46px; min-height:46px; border-radius:8px; font-size:16px; gap:8px; background-image:none; box-shadow:0 1px 2px #173c3020; }
.builder-workspace .builder-preview-action .try-site-button { background:var(--ui-green); border-color:#11643e; color:#fff; }
.builder-workspace .builder-preview-action .back-to-building { background:var(--ui-blue-soft); border-color:#bed2ef; color:#1857ad; }
.builder-workspace .site-pages,#code-pages .site-pages { min-height:56px; gap:8px; padding:6px 20px; background:#f9fafb; border-bottom:1px solid var(--ui-line); }
.site-pages .pages-label { margin-right:4px; font-size:14px; font-weight:650; color:var(--ui-muted); }
.builder-workspace .site-pages button,#code-pages .site-pages button { min-height:44px; height:44px; padding:8px 12px; border:1px solid transparent; border-radius:7px; background:transparent; color:#4b627c; font-size:16px; box-shadow:none; gap:8px; }
.builder-workspace .site-pages button[aria-pressed=true],#code-pages .site-pages button[aria-pressed=true] { background:#eaf2ff; border:1px solid #b8ceeb; box-shadow:inset 0 -2px #5485c7; color:#174f9b; }
.builder-workspace .site-pages .new-page-control,#code-pages .site-pages .new-page-control { color:#4b627c; border:1px dashed #b9c8d8; background:transparent; }
.builder-workspace .site-pages .page-settings-control,#code-pages .site-pages .page-settings-control { border:1px solid #d6dfe9; background:#fff; }
.page-chips { gap:4px; }
.site-pages .ui-icon { width:18px; height:18px; }
/* Color belongs to tools; paper belongs to the work surface. */
.builder-workspace .builder-layout { grid-template-columns:208px minmax(0,1fr) 304px; }
.builder-workspace[data-view=build][data-linked-code=true] .builder-layout { grid-template-columns:208px minmax(0,1fr) 340px; }
.builder-workspace[data-view=preview] .builder-layout,.builder-workspace[data-view=code] .builder-layout { grid-template-columns:minmax(0,1fr); }
.builder-workspace .block-palette { padding:20px 14px; border-right:1px solid var(--ui-line); background:#fffefb; box-shadow:none; scrollbar-width:thin; }
.builder-workspace .block-palette h2 { font-size:20px; letter-spacing:-.25px; line-height:1.25; margin:0 0 6px; }
.toolbox-heading h2::after { display:none; }
.toolbox-heading p { font-size:14px; color:var(--ui-muted); margin:0 0 16px; line-height:1.5; }
.builder-workspace .block-palette-items { gap:8px; }
.builder-workspace .palette-block { min-height:86px; padding:10px 5px 8px; gap:5px; border:1px solid #d5e0ed; border-radius:9px; color:#25445f; background:var(--tool-tint); background-image:none; box-shadow:0 1px 1px #203b5909; font-size:16px; font-weight:650; transform:none; transition:background-color .12s,border-color .12s,box-shadow .12s; }
.builder-workspace .palette-block::after { display:none; }
.builder-workspace .block-palette .palette-block:hover:not(:disabled):not([aria-selected=true]):not([aria-pressed=true]) { transform:none; border-color:#6f95c3; background:var(--tool-tint); background-image:none; box-shadow:0 0 0 2px #c8dcf480; }
.builder-workspace .block-palette .palette-block:active { transform:none; box-shadow:inset 0 1px 3px #203b591a; }
.builder-workspace .toolbox-symbol { width:42px; height:40px; transition:none; }
.builder-workspace .paper-tool-icon { display:block; color:#345773; pointer-events:none; }
.builder-workspace .palette-block:is(:hover,:focus-visible) .toolbox-symbol { transform:none; }
.builder-workspace .tool-title { --tool-tint:#eef4ff; }
.builder-workspace .tool-text { --tool-tint:#f4f0fc; }
.builder-workspace .tool-picture { --tool-tint:#eef6e9; }
.builder-workspace .tool-sticker { --tool-tint:#fff5d9; }
.builder-workspace .tool-sound { --tool-tint:#fbf0f6; }
.builder-workspace .tool-button { --tool-tint:#fff0e6; }
.builder-workspace .tool-divider { --tool-tint:#edf6f4; min-height:44px; }
.builder-workspace .more-blocks { margin:12px 0 0; border:1px solid #d9e1e8; border-radius:8px; background:#f7f9fb; }
.builder-workspace .more-blocks>summary { min-height:46px; padding:12px; font-size:16px; font-weight:650; color:var(--ui-ink); }
.builder-workspace .more-blocks>p { font-size:14px; padding:0 12px 12px; color:var(--ui-muted); }
.builder-workspace .more-blocks .block-palette-items { padding:0 8px 8px; gap:6px; }
.builder-workspace .more-blocks .palette-block { display:flex; flex-direction:row; min-height:64px; padding:10px 8px; font-size:15px; gap:9px; background:#fff; text-align:left; border-color:#e0e6ec; box-shadow:none; }
.builder-workspace .more-blocks .palette-block small { font-size:13px; line-height:1.4; font-weight:400; color:var(--ui-muted); }
.builder-workspace .more-blocks .toolbox-symbol { width:34px; height:36px; }
.builder-workspace .more-blocks .adventure-pages { margin:2px 8px 10px; width:calc(100% - 16px); border-radius:7px; background:#f0f5fd; color:#254e7b; min-height:58px; }
.builder-workspace .canvas-media { margin-top:18px; padding-top:16px; border-top:1px solid #e1e5e9; }
.canvas-media-heading { font-size:16px; color:var(--ui-ink); margin-bottom:6px; }
.canvas-media-tip { font-size:14px; color:var(--ui-muted); margin:0 0 10px; }
.builder-workspace .canvas-media-featured { display:grid; grid-template-columns:repeat(4,70px); gap:7px; overflow-x:auto; padding:0 1px 8px; scrollbar-width:thin; scroll-snap-type:none; }
.builder-workspace .canvas-media .canvas-media-friend { min-height:86px; padding:6px; border:1px solid #dce5ed; border-radius:8px; background:#f6f9fc; background-image:none; box-shadow:none; scroll-snap-align:start; }
.canvas-media-friend .canvas-media-thumbnail { height:48px; }
.canvas-media-friend img { filter:none; }
.canvas-media-friend .canvas-media-name { font-size:14px; font-weight:600; color:#385672; }
.builder-workspace .canvas-media .canvas-media-toggle,.builder-workspace .canvas-media .my-pictures-button,.builder-workspace .add-section { display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; border:1px solid #cedbe9; border-radius:8px; background:#fff; color:#365879; font-size:15px; line-height:1.3; padding:9px; box-shadow:none; }
.builder-workspace .canvas-media .my-pictures-button { background:#f0f5fc; color:#245b9d; }
.builder-workspace .add-section { margin-top:14px; border-style:dashed; }
.builder-workspace .canvas-media-friend-nav button { min-height:44px; font-size:14px; padding:7px; border-radius:6px; box-shadow:none; }
.builder-workspace .canvas-media-tray { border:1px solid #d7e1eb; border-radius:8px; background:#f6f8fb; box-shadow:none; padding:10px 8px; }
.builder-workspace .canvas-media-results .canvas-media-picture { background:#fff; border:1px solid #dce3eb; border-radius:6px; box-shadow:none; font-size:14px; }
.builder-workspace .canvas-media-results .canvas-media-thumbnail { background:#f5f7fa; }
.builder-workspace .canvas-media-field input,.builder-workspace .canvas-media-field select { font-size:16px; border:1px solid #abbcd0; border-radius:7px; background:#fff; }
.builder-workspace .builder-stage { padding:28px 28px 24px; background-color:var(--ui-desk); background-image:linear-gradient(#f4f1e8e8,#f4f1e8e8),url('/assets/textures/kraft-grain.png'); background-size:auto,384px 384px; box-shadow:inset 0 1px 3px #203b5906; }
.builder-workspace .canvas-document { outline:6px solid #fff; border-radius:3px; box-shadow:0 0 0 7px #d8d6ce,0 8px 18px #403a2914; }
.builder-workspace .canvas-add-section { min-height:48px; margin-top:22px; border:1px dashed #aab9c7; border-radius:8px; background:#fffdf7c9; color:#4a6175; background-image:none; box-shadow:none; font-size:16px; }
/* Settings stay associated with the selected object, with a persistent context row. */
.builder-workspace .block-inspector { padding:0 18px 24px; border-left:1px solid var(--ui-line); background:#fffefb; background-image:none; scrollbar-width:thin; scroll-padding-top:calc(var(--inspector-header-height,136px) + 8px); }
.builder-workspace .inspector-context-nav { position:sticky; top:0; z-index:20; margin:0 -18px 20px; padding:12px 10px; gap:4px; border-bottom:1px solid var(--ui-line); background:#fffefbf5; backdrop-filter:blur(8px); }
.builder-workspace .inspector-context-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:58px; padding:8px 4px; flex:1; border:1px solid transparent; border-radius:7px; background:transparent; color:#52677f; font-size:14px; line-height:1.25; font-weight:600; }
.builder-workspace .inspector-context-nav button>span { min-width:0; white-space:nowrap; }
.builder-workspace .inspector-context-nav button[aria-pressed=true] { border:1px solid #bed2ee; background:#edf4ff; color:#1b56a2; box-shadow:none; }
.builder-workspace .inspector-context-nav .ui-icon { display:block; width:18px; height:18px; flex:0 0 18px; vertical-align:middle; }
.builder-workspace .inspector-welcome { display:flex; align-items:center; gap:12px; position:static; margin:0 0 22px; padding:12px; border:1px solid #ece4cc; border-radius:9px; background:#fff9e9; box-shadow:none; text-align:left; }
.inspector-welcome::before { display:none; }
.builder-workspace .inspector-welcome img { width:42px; height:52px; flex:none; }
.builder-workspace .inspector-welcome h2 { font-size:16px; letter-spacing:0; margin:0 0 4px; }
.builder-workspace .inspector-welcome p { font-size:14px; line-height:1.45; color:#64705f; margin:0; }
.builder-workspace .inspector-context-heading>p,.builder-workspace .inspector-heading p { font-size:12px; font-weight:650; letter-spacing:.6px; margin:0 0 6px; color:#65778a; }
.builder-workspace .inspector-context-heading { margin-bottom:20px; }
.builder-workspace .inspector-context-heading h2,.builder-workspace .inspector-heading h2 { margin:0; font-size:22px; line-height:1.25; color:var(--ui-ink); letter-spacing:-.3px; }
.builder-workspace .inspector-heading>div { min-width:0; }
html:root .builder-workspace .inspector-heading.named-inspector-heading h2 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; max-height:2.6em; overflow:hidden; overflow-wrap:anywhere; font-size:18px; line-height:1.3; }
html:root .builder-workspace .inspector-heading.named-inspector-heading .inspector-block-icon { flex:0 0 44px; }
.builder-workspace .inspector-context-heading>span { display:block; margin-top:7px; font-size:14px; line-height:1.45; color:var(--ui-muted); }
.builder-workspace .inspector-block-icon { width:44px; height:44px; border-radius:9px; background:#eff4fc; box-shadow:none; padding:4px; }
.builder-workspace .inspector-block-icon .paper-tool-icon { width:32px; height:32px; }
.builder-workspace .inspector-tabs { display:flex; gap:2px; margin:16px 0 20px; padding:3px; border:1px solid #e0e5eb; border-radius:8px; background:#f2f4f7; }
.builder-workspace .inspector-tabs button { min-height:44px; min-width:0; padding:8px; border:1px solid transparent; border-radius:5px; background:transparent; color:#596e84; font-size:15px; flex:1; }
.builder-workspace .inspector-tabs button[aria-selected=true] { border-color:#cbd7e5; color:#204f88; background:#fff; box-shadow:0 1px 1px #203b5910; }
.builder-workspace .builder-field { font-size:16px; font-weight:600; color:#34516d; margin-bottom:18px; }
.builder-workspace .block-inspector input:not([type=checkbox]):not([type=range]),.builder-workspace .builder-field select,.builder-workspace .builder-field textarea { font-size:16px; line-height:1.5; min-height:46px; background:#fff; color:var(--ui-ink); border:1px solid #aebfd1; border-radius:7px; padding:10px 11px; }
.builder-workspace .builder-field>input:not([type=checkbox]):not([type=radio]),.builder-workspace .builder-field>select,.builder-workspace .builder-field>textarea { display:block; width:100%; max-width:100%; min-width:0; margin-top:8px; box-sizing:border-box; }
.builder-workspace .block-inspector input[type=range] { width:100%; min-width:0; accent-color:var(--ui-blue); min-height:44px; }
.builder-workspace .block-inspector fieldset { margin:0 0 22px; padding:0; border:0; }
.builder-workspace .block-inspector legend { font-size:16px; margin-bottom:9px; padding:0; color:#34516d; font-weight:600; }
.builder-workspace .choice-grid { gap:8px; margin-top:0; }
/* A fixed artwork row and a separate text row keep every choice centered.
   Preview internals own their dimensions; they must never spill into labels. */
.builder-workspace .choice-tile { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:40px auto; justify-items:center; align-content:start; align-items:center; min-height:98px; border:1px solid #d6e0ea; border-radius:8px; padding:18px 6px 12px; gap:8px; background:#fff; box-shadow:none; color:#405c78; }
.builder-workspace .choice-tile:hover { border-color:#90afd4; background:#f7faff; }
.builder-workspace .choice-tile[aria-pressed=true] { border:1px solid #4a7dc1; background:#edf4ff; box-shadow:inset 0 0 0 1px #4a7dc1; color:#1c569e; }
.builder-workspace .choice-name { display:block; max-width:100%; font-size:14px; line-height:1.35; font-weight:600; overflow-wrap:normal; word-break:normal; }
.builder-workspace .choice-animation-speed { padding-inline:4px; }
.builder-workspace .choice-picture { display:grid; place-items:center; width:56px; max-width:100%; height:40px; min-height:40px; }
.builder-workspace .choice-picture>svg { display:block; width:30px; height:30px; max-width:100%; }
.builder-workspace .choice-check { top:5px; right:5px; width:12px; height:12px; line-height:12px; }
.builder-workspace .choice-check .ui-icon { display:block; width:12px; height:12px; }
.builder-workspace .theme-preview { display:flex; flex-direction:column; justify-content:center; gap:3px; width:48px; height:32px; max-width:100%; padding:4px; border:1px solid #17324d26; border-radius:4px; box-sizing:border-box; box-shadow:none; }
.builder-workspace .theme-preview>span { flex:none; width:100%; height:10px; margin:0; border-radius:2px; }
.builder-workspace .theme-preview i { flex:none; width:80%; height:2px; margin:0; border-radius:1px; }
.builder-workspace .theme-preview i:last-child { width:55%; }
.builder-workspace .layout-preview { display:flex; gap:3px; width:48px; height:32px; max-width:100%; padding:4px; border:1px solid #7b9dd0; border-radius:4px; box-sizing:border-box; }
.builder-workspace .layout-preview i { min-width:0; }
.builder-workspace .background-preview { display:flex; flex-direction:column; justify-content:center; gap:4px; width:48px; height:32px; max-width:100%; padding:6px; box-sizing:border-box; }
.builder-workspace .background-preview i { flex:none; height:3px; margin:0; }
.builder-workspace .size-preview { display:block; line-height:32px; }
.builder-workspace .size-preview-image { line-height:0; }
html:root .builder-workspace .size-preview-image>svg { display:block; width:24px; height:24px; }
html:root .builder-workspace .size-preview-image.size-preview-s>svg { width:16px; height:16px; }
html:root .builder-workspace .size-preview-image.size-preview-l>svg { width:32px; height:32px; }
.builder-workspace .inspector-wide { display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:9px 12px; font-size:15px; line-height:1.4; border:1px solid #cbd8e6; border-radius:8px; color:#315b87; background:#f8fbff; box-shadow:none; }
.builder-workspace .remove-block,.builder-workspace .remove-section-button { color:#a23739; background:#fff; border-color:#e6d0d1; }
.builder-workspace .remove-block:hover,.builder-workspace .remove-section-button:hover { background:#fff1f1; border-color:#c78688; }
.builder-workspace .inspector-tip,.builder-workspace .effect-tip { font-size:14px; line-height:1.5; color:var(--ui-muted); }
.builder-workspace .block-more-options,.builder-workspace .column-width-settings,.builder-workspace .rich-item,.builder-workspace .shared-design { border:1px solid #dbe3eb; border-radius:8px; background:#fafbfc; }
.builder-workspace .shared-design { padding:0 12px; }
.builder-workspace .shared-design>:last-child:not(summary) { margin-bottom:14px; }
.builder-workspace .rich-row-actions>.builder-field { flex:1; min-width:0; }
.builder-workspace .block-more-options summary,.builder-workspace .column-width-settings summary,.builder-workspace .rich-item summary,.builder-workspace .shared-design summary { min-height:46px; font-size:15px; font-weight:600; color:#385b7b; }
.builder-workspace .rich-advanced { margin-top:12px; border-top:1px solid #dbe3eb; }
.builder-workspace .rich-advanced>summary { min-height:44px; padding:12px 0; color:#385b7b; font-size:14px; font-weight:600; cursor:pointer; }
.builder-workspace .rich-advanced>summary:focus-visible { outline:3px solid #2468d4; outline-offset:2px; border-radius:4px; }
.builder-workspace .block-effects { border:1px solid #dbe3eb; border-radius:8px; background:#f7f9fc; }
.builder-workspace .section-picture-setting { border-color:#e1e6ec; margin-top:18px; padding-top:18px; }
.builder-workspace .section-picture-setting p { font-size:14px; line-height:1.5; color:var(--ui-muted); }
.builder-workspace .font-picker { border:1px solid #d5e0eb; border-radius:8px; background:#fff; }
.font-picker summary { font-size:16px; min-height:56px; padding:12px; }
.font-picker summary strong { display:inline; margin-left:8px; font-size:18px; }
.font-samples { grid-template-columns:minmax(0,1fr); gap:6px; padding:0 10px 12px; }
.builder-workspace .font-sample { display:grid; grid-template-columns:80px minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; row-gap:2px; min-height:62px; padding:9px 12px; border:1px solid #d5e0eb; border-radius:6px; background:#fff; box-shadow:none; }
.font-sample .font-sample-letters { grid-column:1; grid-row:1 / 3; align-self:center; font-size:23px; white-space:nowrap; }
.font-sample strong { grid-column:2; grid-row:1; font-size:14px; padding-right:18px; }
.font-sample small { grid-column:2; grid-row:2; font-size:13px; }
.builder-workspace .font-sample[aria-pressed=true] { border-color:#4a7dc1; color:var(--ui-ink); background:#edf4ff; box-shadow:inset 0 0 0 1px #4a7dc1; }
.builder-workspace .style-kit-grid { grid-template-columns:1fr; gap:7px; }
.builder-workspace .style-kit { display:grid; grid-template-columns:56px minmax(0,1fr); grid-template-rows:auto auto; gap:4px 12px; min-height:76px; padding:10px; border:1px solid #d8e1eb; border-radius:8px; background:#fff; box-shadow:none; text-align:left; }
.builder-workspace .style-kit .kit-sample { grid-column:1; grid-row:1 / 3; width:56px; height:56px; margin:0; padding:6px; gap:4px; }
.builder-workspace .style-kit .kit-sample b { flex:none; font-size:22px; line-height:24px; }
.builder-workspace .style-kit .kit-sample i { flex:none; }
.builder-workspace .style-kit strong { grid-column:2; grid-row:1; align-self:end; font-size:15px; line-height:1.3; }
.builder-workspace .style-kit small { grid-column:2; grid-row:2; font-size:13px; line-height:1.4; }
.builder-workspace .style-kit[aria-pressed=true] { background:#edf4ff; border-color:#4a7dc1; box-shadow:inset 0 0 0 1px #4a7dc1; color:#245b9b; }
/* Keep disclosure arrows inside the row instead of using outside list markers. */
.builder-workspace :is(.block-inspector details,.more-blocks)>summary { --disclosure-inset:12px; position:relative; display:block; list-style:none; line-height:1.5; padding-inline-start:calc(var(--disclosure-inset) + 26px); cursor:pointer; }
.builder-workspace .block-inspector :is(.block-more-options,.column-width-settings,.rich-item,.shared-design,.rich-advanced)>summary { --disclosure-inset:0px; }
.builder-workspace :is(.block-inspector details,.more-blocks)>summary::marker { content:""; }
.builder-workspace :is(.block-inspector details,.more-blocks)>summary::-webkit-details-marker { display:none; }
.builder-workspace :is(.block-inspector details,.more-blocks)>summary::before { content:""; position:absolute; inset-inline-start:var(--disclosure-inset); top:calc(12px + .75em); width:18px; height:18px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transform:translateY(-50%); transition:transform .16s ease; pointer-events:none; }
.builder-workspace :is(.block-inspector details,.more-blocks)[open]>summary::before { transform:translateY(-50%) rotate(90deg); }
/* Editor names are optional organization, beneath the actual design controls. */
.builder-workspace .editor-name-settings { margin:12px 0; border:1px solid #d2e1ed; border-radius:4px; background:#f7fbff; }
.builder-workspace .editor-name-settings>summary { min-height:44px; padding-block:10px; padding-inline-end:12px; font-size:14px; font-weight:600; }
.builder-workspace .editor-name-settings>summary::before { top:calc(10px + .75em); }
html:root .builder-workspace .editor-name-settings>.editor-name-field { display:block; margin:0; padding:0 12px 12px; }
.builder-workspace .editor-name-settings .editor-name-field small { font-size:12px; line-height:1.4; margin-top:6px; }
.builder-workspace .site-design-settings>.inspector-tip:last-child { margin-top:16px; }
/* Selection tools attach to the chosen content without changing page geometry. */
.builder-workspace .builder-stage { overflow-anchor:none; }
.builder-workspace .canvas-document .builder-block { --block-selection:#2366bc; outline:0; }
.builder-workspace .canvas-document .canvas-block-frame { position:absolute; z-index:6; inset:auto; left:var(--block-frame-x,-4px); top:var(--block-frame-y,-4px); width:var(--block-frame-width,calc(100% + 8px)); height:var(--block-frame-height,calc(100% + 8px)); border:2px solid transparent; border-radius:4px; pointer-events:none; }
.builder-workspace .canvas-document .builder-block:not(.selected-block):not(:focus-visible):not([data-visual-frame=image]):hover>.canvas-block-frame,.builder-workspace .canvas-document .builder-block:not(.selected-block):not(:focus-visible)[data-visual-frame=image]:has(img:hover,.jr-motion-stage:hover)>.canvas-block-frame { border-color:#aac6ec; }
.builder-workspace .canvas-document .builder-block:is(.selected-block,:focus-visible,:has([data-editable-block]:focus)) { outline:0; box-shadow:none; }
.builder-workspace .canvas-document .builder-block:is(.selected-block,:has([data-editable-block]:focus))>.canvas-block-frame { border-color:var(--block-selection); }
.builder-workspace .canvas-document .builder-block:focus-visible>.canvas-block-frame { border-color:var(--block-selection); box-shadow:0 0 0 2px #2366bc22; }
.builder-workspace .canvas-document .builder-section.selected-section>.builder-section-content { outline:2px solid #aac6ec; outline-offset:5px; }
.builder-workspace .canvas-document .builder-column.selected-column { outline:1px dashed #90add0; outline-offset:3px; }
.builder-workspace .canvas-document :is(.canvas-block-toolbar,.section-toolbar) { display:none!important; }
.builder-workspace .canvas-document :is([data-block-type=picture],[data-block-type=sticker],[data-block-type=divider]) { cursor:default; touch-action:pan-y; }
.builder-workspace .canvas-document :is([data-block-type=picture],[data-block-type=sticker]) :is(img,.jr-motion-stage) { cursor:grab; }
/* A compact overlay; neutral selection has no visible or reserved tools row. */
html:root .builder-workspace .canvas-selection-bar { box-sizing:border-box; position:absolute; top:0; left:0; z-index:25; width:320px; min-width:0; margin:0; padding:3px; border:1px solid #9fbae0; border-radius:9px; background:#fff; box-shadow:0 3px 12px #244b751f; color:#244b75; user-select:none; -webkit-user-select:none; transform:none; translate:none; scale:1; }
html:root .builder-workspace .canvas-selection-content { position:relative; display:flex; align-items:center; gap:6px; height:44px; min-width:0; }
html:root .builder-workspace .canvas-selection-empty { display:none; }
html:root .builder-workspace .canvas-selection-content>:is(.canvas-block-toolbar,.section-toolbar) { position:static; display:flex; flex:1; align-items:center; flex-wrap:nowrap; gap:3px; min-width:0; width:auto; max-width:none; height:44px; min-height:44px; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; opacity:1; pointer-events:auto; transform:none; }
html:root .builder-workspace .canvas-selection-bar :is(.canvas-block-label,.section-toolbar>button:first-child) { position:static; display:flex; align-items:center; flex:1 1 0; max-width:none; min-width:0; width:auto; height:44px; min-height:44px; padding:0 6px; border:0; border-radius:6px; background:transparent; color:#244b75; font:650 13px/1.35 var(--rocode-font-family); opacity:1; white-space:nowrap; overflow:hidden; }
html:root .builder-workspace .canvas-selection-bar :is(.canvas-block-name,.rocode-brand-label,.rocode-brand-label>span) { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html:root .builder-workspace .canvas-selection-bar .canvas-block-label { pointer-events:none; }
html:root .builder-workspace .canvas-selection-bar :is(.canvas-control,.canvas-selection-clear,.section-toolbar>:where(button)) { box-sizing:border-box; position:relative; display:flex; align-items:center; justify-content:center; flex:none; gap:6px; inset:auto; width:auto; min-width:44px; height:44px; min-height:44px; margin:0; padding:0 9px; border:1px solid transparent; border-radius:6px; background:transparent; color:#285c98; box-shadow:none; font:650 14px/1.25 var(--rocode-font-family); opacity:1; pointer-events:auto; transform:none; touch-action:none; user-select:none; }
html:root .builder-workspace .canvas-selection-bar .block-drag-handle { width:76px; min-width:76px; cursor:grab; }
html:root .builder-workspace .canvas-selection-bar .canvas-selection-clear { width:44px; min-width:44px; margin-left:0; padding:0; border-left-color:#d8e1ec; border-radius:0 6px 6px 0; color:#597087; font-weight:500; }
html:root .builder-workspace .canvas-selection-bar .section-toolbar>button:first-child { flex:1; min-width:0; justify-content:flex-start; overflow:hidden; text-overflow:ellipsis; }
html:root .builder-workspace .canvas-selection-bar .section-column-settings { gap:5px; }
html:root .builder-workspace .canvas-selection-bar button:hover:not(:disabled) { background:#edf4ff; color:#194f92; border-color:#ccdaed; }
html:root .builder-workspace .canvas-selection-bar button:disabled { opacity:.4; cursor:default; }
html:root .builder-workspace .canvas-selection-bar button:active { transform:none; scale:1; }
html:root .builder-workspace .canvas-selection-bar button:focus-visible { outline:3px solid #2468d4; outline-offset:1px; }
html:root .builder-workspace .canvas-selection-bar .canvas-control::before,html:root .builder-workspace .canvas-selection-bar .canvas-control::after { display:none; }
html:root .builder-workspace .canvas-selection-bar .canvas-control span { display:inline; width:auto; height:auto; margin:0; background:none; }
html:root .builder-workspace .canvas-selection-bar .ui-icon { width:20px; height:20px; flex:none; }
html:root .builder-workspace .canvas-selection-bar .canvas-control-value { font-size:13px; font-variant-numeric:tabular-nums; color:#496a90; }
html:root .builder-workspace .canvas-selection-bar .canvas-control[data-resizing=true] { background:#e5f0ff; border-color:#83a9dc; }
html:root .builder-workspace .canvas-selection-bar[data-layout=stacked] .canvas-selection-content { height:88px; align-items:flex-start; }
html:root .builder-workspace .canvas-selection-bar[data-layout=stacked] .canvas-selection-content>:is(.canvas-block-toolbar,.section-toolbar) { display:grid; grid-template-columns:76px 104px minmax(0,1fr); grid-template-rows:44px 44px; gap:0 3px; height:88px; }
html:root .builder-workspace .canvas-selection-bar[data-layout=stacked] :is(.canvas-block-label,.section-toolbar>button:first-child) { grid-row:1; grid-column:1 / -1; width:calc(100% - 48px); padding-left:6px; }
html:root .builder-workspace .canvas-selection-bar[data-layout=stacked] .canvas-block-toolbar>.canvas-control { grid-row:2; }
html:root .builder-workspace .canvas-selection-bar[data-layout=stacked] .canvas-selection-content>.section-toolbar { grid-template-columns:44px 44px minmax(0,1fr); }
html:root .builder-workspace .canvas-selection-bar[data-layout=stacked] .section-toolbar>button:not(:first-child) { grid-row:2; }
html:root .builder-workspace .canvas-selection-bar[data-layout=stacked] .section-column-settings { justify-self:start; }
html:root .builder-workspace .canvas-selection-bar[data-layout=stacked] .canvas-selection-clear { position:absolute; right:0; top:0; }
/* A real slider makes the resizing direction visible before a child touches it. */
html:root .builder-workspace .canvas-selection-bar[data-layout=image] .canvas-selection-content { height:136px; align-items:flex-start; }
html:root .builder-workspace .canvas-selection-bar[data-layout=image] .canvas-selection-content>.canvas-block-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 82px 44px; grid-template-rows:44px 88px; gap:4px 0; width:100%; height:136px; }
html:root .builder-workspace .canvas-selection-bar[data-layout=image] .canvas-block-label { grid-column:1; grid-row:1; padding:0 5px; font-size:13px; }
html:root .builder-workspace .canvas-selection-bar[data-layout=image] .block-drag-handle { grid-column:2; grid-row:1; width:82px; min-width:82px; padding:2px 6px; flex-wrap:wrap; align-content:center; gap:0 4px; }
html:root .builder-workspace .canvas-selection-bar[data-layout=image] .canvas-move-caption { display:block; flex:0 0 100%; width:100%; color:#597087; font-size:12px; line-height:14px; font-weight:500; white-space:nowrap; }
html:root .builder-workspace .canvas-selection-bar[data-layout=image] .canvas-selection-clear { position:absolute; right:0; top:0; }
html:root .builder-workspace .canvas-selection-bar .canvas-size-control { grid-column:1 / -1; grid-row:2; display:grid; grid-template-rows:22px 44px 17px; gap:2px; min-width:0; width:100%; height:88px; padding:0 6px; border-top:1px solid #d8e6f4; color:#315776; }
.canvas-size-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; font:650 13px/1.4 var(--rocode-font-family); }
.canvas-size-heading label { cursor:pointer; }
html:root .builder-workspace .canvas-selection-bar .canvas-size-heading .canvas-control-value { color:#285c98; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
html:root .builder-workspace .canvas-selection-bar .canvas-size-slider { -webkit-appearance:none; appearance:none; display:block; width:100%; min-width:0; height:44px; min-height:44px; padding:0; margin:0; border:0; background:transparent; box-shadow:none; accent-color:#4f80ff; cursor:pointer; touch-action:pan-y; }
.canvas-size-slider::-webkit-slider-runnable-track,.image-size-field>input[type=range]::-webkit-slider-runnable-track { height:6px; border-radius:4px; background:linear-gradient(to right,#4f80ff var(--canvas-size-fill,44.4%),#d7e5f5 var(--canvas-size-fill,44.4%)); }
.canvas-size-slider::-moz-range-track,.image-size-field>input[type=range]::-moz-range-track { height:6px; border-radius:4px; background:#d7e5f5; }
.canvas-size-slider::-moz-range-progress,.image-size-field>input[type=range]::-moz-range-progress { height:6px; border-radius:4px; background:#4f80ff; }
.canvas-size-slider::-webkit-slider-thumb,.image-size-field>input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:24px; height:24px; margin-top:-9px; border:3px solid #fff; border-radius:50%; background:#4f80ff; box-shadow:0 0 0 1px #3568e6,0 1px 3px #244b7533; }
.canvas-size-slider::-moz-range-thumb,.image-size-field>input[type=range]::-moz-range-thumb { width:18px; height:18px; border:3px solid #fff; border-radius:50%; background:#4f80ff; box-shadow:0 0 0 1px #3568e6,0 1px 3px #244b7533; }
html:root .builder-workspace .canvas-selection-bar .canvas-size-slider:focus-visible { outline:3px solid #2468d4; outline-offset:0; border-radius:5px; }
.canvas-size-cues { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; font:500 12px/1.35 var(--rocode-font-family); color:#597087; }
/* Inspector sizing mirrors the same small-to-big controls and groups presets
   with their slider, so descriptive picture text stays a separate task. */
html:root .builder-workspace .image-size-settings { min-width:0; margin:0 0 18px; padding:12px; border:1px solid #d2e5ef; border-radius:8px; background:#f6fbff; }
html:root .builder-workspace .image-size-field { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px; margin:0 0 12px; }
.image-size-field>output { font-size:14px; color:#285c98; font-variant-numeric:tabular-nums; }
html:root .builder-workspace .image-size-field>input[type=range] { -webkit-appearance:none; appearance:none; grid-column:1 / -1; width:100%; min-width:0; height:44px; min-height:44px; margin:0; padding:0; border:0; background:transparent; box-shadow:none; accent-color:#4f80ff; cursor:pointer; touch-action:pan-y; }
html:root .builder-workspace .image-size-field>input[type=range]:focus-visible { outline:3px solid #2468d4; outline-offset:0; border-radius:5px; }
.image-size-field>.size-direction { grid-column:1 / -1; display:flex; justify-content:space-between; gap:8px; font:500 12px/1.35 var(--rocode-font-family); color:#597087; }
html:root .builder-workspace .image-size-settings>.choice-field { margin:0 0 12px; }
html:root .builder-workspace .image-size-settings>.choice-field>legend { font-size:14px; margin-bottom:7px; }
html:root .builder-workspace .image-size-settings .choice-tile { min-height:84px; grid-template-rows:34px auto; padding:10px 4px 8px; gap:6px; }
html:root .builder-workspace .block-inspector .image-size-settings>.inspector-wide { min-height:44px; margin-bottom:0; font-size:14px; }
/* CSS does not animate the toolbar anchor: held drag/size controls stay fixed. */
html:root .builder-workspace .canvas-selection-bar,
html:root .builder-workspace .canvas-selection-bar :is(.canvas-block-toolbar,.section-toolbar) { transition:none; }
.builder-workspace.is-dragging .canvas-selection-bar,.builder-workspace.is-dragging .canvas-selection-bar * { pointer-events:none!important; }
.builder-workspace .canvas-document .canvas-control { display:flex; align-items:center; justify-content:center; gap:6px; height:44px; min-height:44px; padding:0 10px; border:1px solid #9db8db; border-radius:8px; background:#fff; color:#235c9d; box-shadow:0 2px 6px #203b5918; font:650 14px/1.25 var(--rocode-font-family); opacity:0; pointer-events:none; }
.builder-workspace .canvas-document .canvas-control .ui-icon { width:20px; height:20px; }
.builder-workspace .canvas-document .column-resize-handle { width:110px; min-width:110px; padding:0 8px; top:50%; transform:translate(-50%,-50%); cursor:col-resize; z-index:8; }
.builder-workspace .canvas-document .column-resize-handle .canvas-control-label { font-size:13px; }
.builder-workspace .canvas-document .column-resize-handle .canvas-control-value { display:none; }
.builder-workspace .canvas-document .column-resize-handle::before { display:block; inset:auto; left:50%; top:50%; width:2px; height:var(--column-rail-height,100%); transform:translate(-50%,-50%); border:0; border-radius:1px; background:linear-gradient(to bottom,#7ea6d8 calc(50% - 23px),transparent calc(50% - 23px),transparent calc(50% + 23px),#7ea6d8 calc(50% + 23px)); box-shadow:none; pointer-events:none; z-index:-1; }
.builder-workspace .canvas-document .selected-section .column-resize-handle:not([inert]) { opacity:1; pointer-events:auto; }
.builder-workspace .canvas-document .builder-section:not(.selected-section) .column-resize-handle { opacity:0; pointer-events:none; }
.builder-workspace .canvas-document .column-resize-handle:focus-visible { outline:3px solid #2468d4; outline-offset:2px; }
.builder-workspace .canvas-document .column-resize-handle[data-resizing=true] .canvas-control-value { display:block; position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); padding:4px 8px; border-radius:5px; background:#e8f2ff; white-space:nowrap; }
html:root .builder-workspace :is(.canvas-selection-bar,.canvas-document) .canvas-control .canvas-control-help { display:none; position:absolute; z-index:40; left:var(--control-help-left,0); right:auto; top:var(--control-help-top,calc(100% + 8px)); bottom:var(--control-help-bottom,auto); width:var(--control-help-width,230px); height:auto; margin:0; padding:10px 12px; border:1px solid #c1d1e5; border-radius:8px; background:#fff; box-shadow:0 4px 12px #203b5924; color:#304f71; font:500 14px/1.45 var(--rocode-font-family); text-align:left; white-space:normal; pointer-events:none; transform:none; }
html:root .builder-workspace :is(.canvas-selection-bar,.canvas-document) .canvas-control:is(:hover,:focus-visible):not([data-resizing=true]) .canvas-control-help { display:block; }
.builder-workspace.is-dragging .canvas-document .canvas-control,.builder-workspace.is-resizing .canvas-document .canvas-control:not([data-resizing=true]) { opacity:0!important; pointer-events:none!important; }
.builder-workspace.is-dragging .canvas-selection-bar .canvas-control-help { display:none!important; }
.builder-workspace.is-resizing:has(.column-resize-handle[data-resizing=true]),.builder-workspace.is-resizing:has(.column-resize-handle[data-resizing=true]) * { cursor:col-resize!important; }
/* Filled columns use the toolbox and the live insertion line. A floating plus
   used to cover the final sentence and duplicated the column-selection action. */
.builder-workspace .canvas-document .column-end.has-blocks { display:none; }
.builder-workspace .canvas-document .canvas-block-toolbar>.canvas-block-label { position:static; display:flex; align-items:center; flex:1; min-width:0; padding:8px 10px; border-radius:6px 0 0 0; background:#edf4ff; color:#1d579f; font:700 13px/1.3 var(--rocode-font-family); opacity:1; white-space:nowrap; }
/* Effects are explained in settings; editor hints must never cover the next block. */
.builder-workspace .canvas-document .canvas-effect-hint { display:none; }
.builder-workspace .shared-site-edit { min-height:44px; border-radius:7px; font-size:14px; box-shadow:none; }
/* Preview and code are working views, not a second set of floating controls. */
.builder-workspace .builder-preview-tools { border:1px solid #d3dee9; border-radius:9px; padding:3px; background:#fff; box-shadow:0 1px 3px #203b5910; }
.builder-workspace .builder-preview-tools button { display:flex; align-items:center; gap:7px; min-height:44px; padding:8px 14px; border-radius:6px; font-size:15px; }
.builder-workspace .builder-preview-tools button[aria-pressed=true] { background:#e9f1ff; color:#1956a6; }
.builder-workspace .builder-preview-paper:not(.phone) { border:6px solid #fff; border-radius:4px; box-shadow:0 0 0 1px #d2d8de,0 7px 20px #203b5912; }
.builder-workspace .builder-code-tools { padding:12px 16px; gap:12px; background:#fff; border:1px solid #d7e1eb; border-radius:9px 9px 0 0; }
.builder-workspace .builder-code-tools button,.builder-workspace .builder-code-tools select { min-height:44px; border-radius:7px; font-size:15px; }
.builder-workspace .builder-code>p { margin:0; padding:12px 16px; background:#f5f8fc; font-size:15px; border-inline:1px solid #d7e1eb; }
.builder-workspace .builder-code>.primary { align-self:flex-end; min-height:46px; border-radius:8px; margin-top:14px; font-size:16px; }
.builder-workspace .linked-code-heading,.builder-workspace .linked-code-caption { background:#fff; background-image:none; border-color:var(--ui-line); }
.builder-workspace .linked-code-heading button { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border-radius:7px; }
.builder-workspace .builder-status { min-height:32px; padding:7px 18px; background:#f9fafb; border-top:1px solid var(--ui-line); color:#5a7187; font-size:13px; line-height:1.4; }
.studio-status { height:28px; min-height:28px; padding:5px 20px; background:#f9fafb; border-top:1px solid #e4e9ee; color:#657789; font-size:12px; }
body:has(.builder-workspace:not([hidden]))>.studio-status { display:none; }
.studio-layout .preview-panel,.studio-layout .code-panel { border-color:var(--ui-line); }
.studio-layout .panel-toolbar,.studio-layout .file-row,.studio-layout .insert-bar,.studio-layout .code-bottom { background:#fffefb; border-color:var(--ui-line); }
.studio-layout button { min-height:44px; border-radius:7px; font-size:15px; }
.studio-layout .file-tabs button { padding:8px 16px; }
.studio-layout .insert-bar { gap:8px; padding:10px 14px; }
.studio-layout .insert-bar button { color:#285b94; background:#f3f7fd; border:1px solid #cad9eb; }
.studio-layout .device-toggle { padding:3px; background:#f0f3f7; border-radius:8px; }
.studio-layout .device-toggle button[aria-pressed=true] { color:#205aa4; background:#e3efff; }
.rocodeAppHeader button:active,.builder-workspace .builder-toolbar button:active,.builder-workspace .site-pages button:active,.builder-workspace .block-inspector button:active,.builder-workspace .block-palette button:active { transform:none; }
:is(.rocodeHeader,.builder-workspace,.studio-layout) :is(button,summary,input,textarea,select):focus-visible { outline:3px solid #2366bc; outline-offset:3px; }
@media(max-width:1200px) {
  .rocodeAppHeader { padding-inline:16px; }
  .rocodeProjectIdentity { flex-basis:260px; padding-inline:10px; margin-left:4px; }
  .rocodeHeaderButton { padding-inline:10px; }
  .rocodeHeaderButton .ui-icon { width:18px; height:18px; }
  .builder-workspace .builder-layout { grid-template-columns:208px minmax(0,1fr) 284px; }
  .builder-workspace[data-view=build][data-linked-code=true] .builder-layout { grid-template-columns:208px minmax(0,1fr) 300px; }
  .builder-workspace[data-view=preview] .builder-layout,.builder-workspace[data-view=code] .builder-layout { grid-template-columns:minmax(0,1fr); }
  .builder-workspace .builder-stage { padding:26px 20px; }
  .builder-workspace .block-palette { padding:18px 12px; }
  .builder-workspace .palette-block { min-height:82px; }
  .builder-workspace .block-inspector { padding-inline:16px; }
  .builder-workspace .inspector-context-nav { margin-inline:-16px; }
}
@media(max-width:1000px) and (min-width:721px) {
  .roboThinkLogo { width:122px; flex-basis:122px; }.roboThinkLogo:after { width:116px; }
  .rocodeProjectIdentity { min-width:130px; flex-basis:220px; }
  .rocodeHeaderButton { padding-inline:8px; font-size:15px; }
  .rocodeHeaderButton .ui-icon { display:none; }
  .builder-workspace .builder-layout { grid-template-columns:208px minmax(0,1fr) 260px; }
  .builder-workspace[data-view=build][data-linked-code=true] .builder-layout { grid-template-columns:208px minmax(0,1fr) 280px; }
  .builder-workspace[data-view=preview] .builder-layout,.builder-workspace[data-view=code] .builder-layout { grid-template-columns:minmax(0,1fr); }
  .builder-workspace .block-palette { padding-inline:10px; }
  .builder-workspace .block-palette h2 { font-size:18px; }
  .builder-workspace .palette-block { font-size:15px; }
  .builder-workspace .more-blocks .palette-block { flex-direction:column; align-items:flex-start; gap:6px; padding:10px; }
  .builder-workspace .inspector-context-nav button { font-size:13px; padding-inline:4px; }
  .builder-workspace .font-sample { grid-template-columns:70px minmax(0,1fr); padding-inline:8px; gap:3px 7px; }
  .font-sample .font-sample-letters { font-size:21px; }
}
@media(max-width:720px) {
  html,body { height:auto; min-height:100%; overflow:auto; }
  .rocodeHeader { position:relative; top:auto; }
  .rocodeAppHeader>button[data-action=projects] { display:flex; }
  .studio-layout .mission-panel { top:12px; bottom:12px; border:1px solid var(--ui-line); border-radius:12px; }
  .projects-intro { align-items:stretch; flex-direction:column; gap:14px; }
  .rocodeAppHeader { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); height:auto; padding:8px 12px 10px; gap:8px 6px; }
  .roboThinkLogo { grid-column:1; width:100%; min-width:0; height:44px; }
  .roboThinkLogo:after { width:100%; height:28px; top:8px; }
  .rocodeProjectIdentity { grid-column:2 / -1; width:auto; min-width:0; margin:0; padding-left:10px; height:50px; }
  .rocodeProjectName { font-size:18px; }
  .header-spacer { display:none; }
  .file-control { grid-column:1; }.file-control>.rocodeHeaderButton { width:100%; }
  .rocodeHeaderButton { width:100%; padding:7px 4px; min-height:44px; height:44px; font-size:14px; gap:3px; border-color:#dce5ef; background:#fff; }
  .rocodeHeaderButton .ui-icon { display:none; }
  .rocodeHeaderMenu { left:0; right:auto; width:min(292px,calc(100vw - 24px)); }
  .builder-workspace .builder-toolbar { grid-template-columns:minmax(0,1fr) 150px; height:auto; min-height:112px; padding:10px 12px; gap:8px; }
  .builder-workspace .builder-views { grid-column:1 / -1; }
  .builder-workspace .builder-views button { flex:1; min-width:0; }
  .builder-workspace .builder-history { grid-column:1; padding:0; border:0; gap:3px; }
  .builder-workspace .builder-history button { min-width:0; padding:7px 4px; font-size:14px; flex:1; gap:5px; }
  .builder-workspace .builder-history .ui-icon { width:17px; height:17px; }
  .builder-workspace .builder-preview-action { grid-column:2; width:150px; }
  .builder-workspace .builder-preview-action button { font-size:14px; padding:8px; }
  .builder-workspace .site-pages,#code-pages .site-pages { padding:8px 12px; gap:6px; flex-wrap:wrap; }
  .site-pages .page-chips { flex:1; min-width:0; }
  .builder-workspace .site-pages button,#code-pages .site-pages button { font-size:14px; padding-inline:9px; }
  .builder-workspace .site-pages .page-settings-control { margin-left:auto; }
  .builder-workspace .builder-layout,.builder-workspace[data-view=build][data-linked-code=true] .builder-layout { display:flex; flex-direction:column; }
  .builder-workspace .block-palette { padding:18px 16px; border:0; border-bottom:1px solid var(--ui-line); overflow:visible; }
  .builder-workspace .block-palette-items { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .builder-workspace .palette-block { min-height:84px; font-size:15px; }
  .builder-workspace .tool-divider { grid-column:auto; flex-direction:column; }
  .builder-workspace .tool-divider .toolbox-symbol { width:38px; height:36px; }
  .builder-workspace .more-blocks .block-palette-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .builder-workspace .more-blocks .palette-block { font-size:15px; }
  .builder-workspace .canvas-media-featured { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .builder-workspace .canvas-media { padding-top:14px; margin-top:14px; }
  .builder-workspace .canvas-media .canvas-media-toggle,.builder-workspace .canvas-media .my-pictures-button { display:inline-flex; width:calc(50% - 4px); max-width:none; vertical-align:top; font-size:14px; }
  .builder-workspace .canvas-media .my-pictures-button { margin-top:0; margin-left:8px; }
  .builder-workspace .canvas-media .canvas-media-toggle[aria-expanded=true] { width:100%; }
  .builder-workspace .canvas-media:has(.canvas-media-toggle[aria-expanded=true]) .my-pictures-button { width:100%; margin:8px 0 0; }
  .builder-workspace .add-section { margin-top:10px; }
  .builder-workspace .builder-stage { padding:28px 16px; overflow:visible; }
  .builder-workspace .block-inspector { padding:0 18px 24px; border:0; border-top:1px solid var(--ui-line); overflow:visible; }
  /* The page itself scrolls on phones, rather than the inspector sidebar. */
  .builder-workspace .block-inspector :is(input,select,textarea,button,summary) { scroll-margin-top:calc(var(--inspector-header-height,136px) + 8px); }
  .builder-workspace .inspector-context-nav { position:sticky; margin-inline:-18px; top:0; }
  .builder-workspace .inspector-context-nav button { font-size:15px; }
  .builder-workspace .inspector-context-nav .ui-icon { display:block; }
  .builder-workspace .builder-code-tools { padding:10px; gap:8px; }
  .builder-workspace .builder-status { font-size:13px; padding:8px 14px; }
}
@media(max-width:380px) {
  .rocodeAppHeader { grid-template-columns:minmax(44px,.8fr) minmax(0,1.4fr) minmax(0,1fr) minmax(44px,.8fr); }
  .builder-workspace .more-blocks .palette-block { flex-direction:column; align-items:flex-start; }
}
@media(min-width:721px) {
  .builder-workspace .palette-block.tool-divider { min-height:44px; height:44px; flex-direction:row; }
}
@media(prefers-reduced-motion:reduce) {
  .builder-workspace .palette-block,.builder-workspace .toolbox-symbol,.builder-workspace :is(.block-inspector details,.more-blocks)>summary::before { transition:none; }
}