/* RoCode's illustrated, tactile tools surround a quiet canvas for the child's work. */
.builder-workspace {
  --workshop-ink: #233c60;
  --workshop-blue: #326ddd;
  --workshop-line: #d9e4f1;
  --builder-line: var(--workshop-line);
  color: var(--workshop-ink);
}
.builder-workspace .builder-toolbar {
  height: 68px;
  gap: 14px;
  padding: 8px 20px;
  background: #fff;
}
.builder-views { gap: 4px; padding: 4px; background: #edf3fa; border-radius: 13px; }
.builder-workspace .builder-views button {
  min-width: 98px; min-height: 44px; padding: 9px 15px;
  border: 0; border-radius: 9px; background: transparent; color: #526984; font-size: 17px;
}
.builder-workspace .builder-views button[aria-selected=true] {
  background: #fff; color: #245bb0; box-shadow: 0 2px 4px #29456818;
}
.builder-history { gap: 6px; align-items: center; }
.builder-workspace .builder-history button {
  min-height: 44px; padding: 8px 11px; border-radius: 10px; color: #476281; font-size: 15px;
}
.builder-workspace .try-site-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 22px; flex-shrink: 0;
  border: 2px solid #16804a; border-radius: 13px;
  background: #218c53; color: #fff; box-shadow: 0 3px 0 #116738;
  font-size: 18px; font-weight: 750;
}
.builder-workspace .builder-toolbar .try-site-button:hover:not(:disabled):not([aria-selected=true]):not([aria-pressed=true]) {
  background: #187a46; border-color: #126639; color: #fff;
}
.builder-workspace .try-site-button:active { box-shadow: 0 1px 0 #116738; }
.try-site-button svg { width: 22px; height: 22px; }
.builder-workspace .back-to-building { border: 1px solid #b9cee9; border-radius: 10px; background: #edf4ff; color: #245bb0; }
.builder-workspace .site-pages { min-height: 58px; padding: 6px 20px; background: #f8faff; }
.builder-workspace .site-pages button { border-radius: 10px; }
.builder-workspace .site-pages button[aria-pressed=true] { border-color: #7da5e4; background: #e9f1ff; box-shadow: none; }
.builder-workspace .builder-layout { grid-template-columns: 208px minmax(0,1fr) 312px; }
.builder-workspace[data-view=build][data-linked-code=true] .builder-layout { grid-template-columns: 208px minmax(0,1fr) minmax(300px,360px); }
.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; background: #fff; scrollbar-width: thin; }
.builder-workspace .block-palette h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.4px; }
.builder-workspace .block-palette>p,.toolbox-heading p { margin: 0 0 18px; color: #59708c; font-size: 15px; line-height: 1.45; }
.builder-workspace .block-palette-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.builder-workspace .palette-block {
  --tool-color: #326ac6; --tool-tint: #edf4ff; --tool-edge: #c0d4f5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; min-height: 91px; gap: 7px; padding: 10px 5px;
  border: 1px solid var(--tool-edge); border-radius: 14px;
  background: var(--tool-tint); color: var(--tool-color);
  box-shadow: 0 3px 0 var(--tool-edge); font-size: 17px; font-weight: 750; text-align: center;
  transition: transform .14s, box-shadow .14s, background-color .14s;
}
.builder-workspace .tool-text { --tool-color: #4b5ac3; --tool-tint: #f0f0ff; --tool-edge: #ced0f3; }
.builder-workspace .tool-picture { --tool-color: #267249; --tool-tint: #edf8e9; --tool-edge: #c0deae; }
.builder-workspace .tool-sticker { --tool-color: #935015; --tool-tint: #fff5d9; --tool-edge: #efdaa0; }
.builder-workspace .tool-sound { --tool-color: #973f8a; --tool-tint: #fbedf8; --tool-edge: #e6c2e0; }
.builder-workspace .tool-button { --tool-color: #a34425; --tool-tint: #fff0e6; --tool-edge: #edc4ad; }
.builder-workspace .tool-divider { --tool-color: #336c80; --tool-tint: #eaf6f8; --tool-edge: #b6dce4; }
.builder-workspace .block-palette .palette-block:hover:not(:disabled):not([aria-selected=true]):not([aria-pressed=true]) {
  background: var(--tool-tint); border-color: var(--tool-color); transform: translateY(-3px); box-shadow: 0 5px 0 var(--tool-edge);
}
.builder-workspace .palette-block:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tool-edge); cursor: grabbing; }
.builder-workspace .tool-divider { grid-column: 1/-1; flex-direction: row; min-height: 44px; padding: 6px; }
.builder-workspace .tool-divider .toolbox-symbol { height: 25px; width: 35px; }
.builder-workspace .toolbox-symbol {
  display: grid; place-items: center; width: 43px; height: 37px; margin: 0;
  color: var(--tool-color); border: 0; border-radius: 0; background: none; overflow: visible;
  font-size: 32px; line-height: 1; transition: transform .14s;
}
.toolbox-symbol svg,.toolbox-symbol img { display: block; width: 100%; height: 100%; object-fit: contain; }
.palette-block:hover .toolbox-symbol,.palette-block:focus-visible .toolbox-symbol { transform: scale(1.08) rotate(-3deg); }
.builder-workspace .add-section { margin-top: 16px; border: 1px dashed #9db9da; border-radius: 11px; background: #f5f9ff; color: #35639d; font-size: 16px; }
.builder-workspace .canvas-media .canvas-media-friend { background: var(--friend-paper); border-color: var(--friend-edge); border-radius: 13px; }
.builder-workspace .canvas-media .canvas-media-friend:hover:not(:disabled):not([aria-selected=true]):not([aria-pressed=true]) { background: var(--friend-paper); border-color: var(--friend-edge); }
.builder-workspace .builder-stage {
  padding: 28px 24px; background-color: #edf3fa;
  background-image: radial-gradient(#cbd9e9 1px,transparent 1px); background-size: 18px 18px;
}
.canvas-document { border-radius: 12px; box-shadow: 0 4px 18px #24497514; }
.builder-workspace .canvas-add-section { border-radius: 12px; background: #ffffffd9; }
.builder-workspace .block-inspector { display: flex; flex-direction: column; padding: 18px; background: #fff; scrollbar-width: thin; }
.block-inspector>div { flex-shrink: 0; }
.inspector-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.inspector-heading h2,.builder-workspace .inspector-heading h2 { margin: 0; font-size: 22px; }
.inspector-heading p { margin: 4px 0 0; color: #617591; font-size: 14px; line-height: 1.45; }
.inspector-tabs { display: flex; gap: 4px; margin: 0 0 22px; padding: 4px; border-radius: 12px; background: #edf3fa; }
.builder-workspace .inspector-tabs button { min-width: 0; min-height: 44px; flex: 1; padding: 7px 5px; border: 0; border-radius: 9px; color: #506786; background: transparent; font-size: 16px; }
.builder-workspace .inspector-tabs button[aria-selected=true],
.builder-workspace .inspector-tabs button[aria-pressed=true] { background: #fff; color: #265eb9; box-shadow: 0 2px 4px #29456818; }
.inspector-panel { min-width: 0; }
.builder-workspace .builder-field { color: #34516e; margin-bottom: 20px; font-size: 16px; }
.builder-workspace .builder-field textarea { padding: 12px; min-height: 106px; border-radius: 11px; border-color: #b9cce3; background: #fbfdff; font-size: 18px; line-height: 1.5; }
.builder-workspace .builder-field select,
.builder-workspace .builder-field input[data-action-property] { border-radius: 10px; border-color: #b9cce3; background: #fbfdff; font-size: 16px; }
.block-inspector .choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 9px; }
.builder-workspace .choice-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; min-height: 76px; gap: 8px; padding: 10px 6px;
  border: 2px solid #dce5f0; border-radius: 12px; background: #fff; color: #47617e;
  font-size: 15px; line-height: 1.3; font-weight: 650; text-align: center;
}
.builder-workspace .choice-tile:hover:not(:disabled):not([aria-pressed=true]) { border-color: #a1bce1; background: #f6f9ff; }
.builder-workspace .choice-tile[aria-pressed=true] { border-color: #477cdc; background: #eef4ff; color: #245bb0; box-shadow: inset 0 0 0 1px #477cdc; }
.choice-tile svg { width: 30px; height: 26px; }
.choice-tile .choice-label { font-size: 15px; }
.choice-tile { position: relative; }
.choice-check { display: none; position: absolute; right: 5px; top: 4px; color: #326ddd; font-size: 12px; }
.choice-tile[aria-pressed=true] .choice-check { display: block; }
.choice-picture { display: grid; place-items: center; min-height: 28px; }
.choice-name { overflow-wrap: anywhere; }
.choice-grid[data-choice-kind=block-size],
.choice-grid[data-choice-kind=block-align],
.choice-grid[data-choice-kind=section-columns],
.choice-grid[data-choice-kind=section-background],
.choice-grid[data-choice-kind=animation-speed] { grid-template-columns: repeat(3,minmax(0,1fr)); }
.inspector-block-icon { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; background: #edf3ff; color: #326bc6; }
.inspector-block-icon svg { width: 30px; height: 30px; }
.inspector-heading p,.inspector-context-heading>p { margin: 0 0 4px; font-size: 11px; font-weight: 750; letter-spacing: .8px; color: #69809a; }
.inspector-context-heading { margin-bottom: 24px; }
.builder-workspace .inspector-context-heading h2 { margin: 0 0 7px; font-size: 22px; }
.inspector-context-heading>span { display: block; font-size: 15px; line-height: 1.5; color: #5b7390; }
.inspector-context-nav { display: flex; flex-wrap: nowrap; order: -1; gap: 6px; margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid #e0e8f2; }
.builder-workspace .inspector-context-nav button { display: flex; flex: 1; align-items: center; justify-content: center; gap: 6px; padding: 8px; min-height: 44px; font-size: 14px; border-radius: 10px; border: 0; background: #f2f6fb; color: #45658b; text-align: center; }
.builder-workspace .inspector-context-nav button[aria-pressed=true] { color: #265fb6; background: #e9f1ff; box-shadow: inset 0 -2px #4f80ff; }
.inspector-context-nav svg { width: 20px; height: 20px; }
.inspector-context-nav button>span[aria-hidden] { display: inline-block; width: 20px; font-size: 21px; text-align: center; }
.inspector-block-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0 12px; }
.builder-workspace .inspector-block-actions button { border-radius: 10px; font-size: 15px; min-height: 44px; padding: 8px; }
.block-more-options,.column-width-settings { margin-bottom: 16px; border: 1px solid #e0e8f2; border-radius: 11px; padding: 0 10px; }
.block-more-options summary,.column-width-settings summary { padding: 12px 0; cursor: pointer; color: #506b8a; font-size: 15px; font-weight: 650; min-height: 44px; }
.block-more-options summary:focus-visible,.column-width-settings summary:focus-visible { outline: 3px solid #1f4fbf; outline-offset: 2px; }
.inspector-welcome { padding: 18px 12px; margin: 0 0 24px; border-radius: 15px; background: #fff7dd; text-align: center; }
.inspector-welcome img { width: 78px; height: 84px; object-fit: contain; }
.builder-workspace .inspector-welcome h2 { font-size: 19px; margin: 8px 0; }
.inspector-welcome p { margin: 0; color: #705d36; font-size: 15px; line-height: 1.5; }
.theme-preview { display: block; width: 78px; height: 44px; padding: 6px; border-radius: 6px; background: var(--theme-paper); border: 1px solid #17324d20; }
.theme-preview>span { display: block; height: 12px; width: 100%; border-radius: 3px; background: var(--theme-accent); margin-bottom: 5px; }
.theme-preview i { display: block; height: 3px; width: 80%; margin-top: 3px; background: var(--theme-ink); opacity: .45; border-radius: 2px; }
.theme-preview i:last-child { width: 55%; }
.layout-preview { display: flex; gap: 3px; width: 48px; height: 30px; padding: 3px; border: 1.5px solid #7b9dd0; border-radius: 4px; background: #fff; }
.layout-preview i { flex: 1; border-radius: 2px; background: #a9c3f0; }
.background-preview { display: block; width: 48px; height: 30px; border: 1px solid #c6d3e5; border-radius: 5px; padding: 7px 6px; background: #fff; color: #63788f; }
.background-preview i { display: block; width: 90%; height: 3px; background: currentColor; border-radius: 2px; margin-bottom: 4px; }
.background-preview i:last-child { width: 60%; }
.background-tint { background: #e8effd; color: #4b6f9d; }
.background-accent { background: #4f80de; color: #fff; }
.size-preview { font-weight: 750; line-height: 30px; }
.size-preview-s { font-size: 17px; }.size-preview-m { font-size: 23px; }.size-preview-l { font-size: 29px; }
.choice-animation-effect.choice-value-fade:is(:hover,:focus-visible) .choice-picture { animation: workshop-fade .8s ease both; }
.choice-animation-effect.choice-value-bounce:is(:hover,:focus-visible) .choice-picture { animation: workshop-bounce .7s ease both; }
.choice-animation-effect.choice-value-zoom:is(:hover,:focus-visible) .choice-picture { animation: workshop-zoom .6s ease both; }
.choice-hover-effect.choice-value-grow:is(:hover,:focus-visible) .choice-picture { transform: scale(1.2); }
.choice-hover-effect.choice-value-tilt:is(:hover,:focus-visible) .choice-picture { transform: rotate(-12deg); }
.choice-hover-effect.choice-value-glow:is(:hover,:focus-visible) .choice-picture { filter: drop-shadow(0 0 5px #8a77ed); }
@keyframes workshop-fade { from { opacity: .1; } to { opacity: 1; } }
@keyframes workshop-bounce { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-10px); } 65% { transform: translateY(-3px); } }
@keyframes workshop-zoom { from { transform: scale(.5); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.builder-workspace .block-inspector fieldset { border-top: 0; margin: 0 0 22px; padding: 0; }
.builder-workspace .block-inspector legend { margin: 0 0 5px; padding: 0; font-size: 16px; color: #34516e; }
.builder-workspace .block-effects { margin: 18px 0; border: 1px solid #dae5f3; border-radius: 12px; background: #f7faff; }
.builder-workspace .block-effects-fields { padding: 10px; }
.builder-workspace .inspector-wide { border-radius: 10px; }
.builder-workspace .block-move-controls button { border-radius: 10px; }
.builder-workspace .try-effects { background: #eaf7ef; color: #267146; border-color: #b9dcc7; }
.builder-workspace .builder-status { padding: 7px 20px; min-height: 32px; background: #f7faff; color: #526d8b; font-size: 13px; }
.builder-preview-paper { border-radius: 12px; box-shadow: 0 6px 20px #2449751a; overflow: hidden; }
.builder-workspace .builder-preview-tools { padding: 4px; border-radius: 12px; background: #fff; border: 1px solid #d3dfed; }
.builder-workspace .builder-preview-tools button { min-height: 44px; border: 0; border-radius: 9px; }
@media(max-width:1100px) {
  .builder-workspace .builder-layout { grid-template-columns: 184px minmax(0,1fr) 280px; }
  .builder-workspace[data-view=build][data-linked-code=true] .builder-layout { grid-template-columns: 184px minmax(0,1fr) 300px; }
  .builder-workspace .builder-stage { padding: 24px 14px; }
  .builder-workspace .block-inspector { padding: 16px 14px; }
  .builder-workspace .builder-toolbar { gap: 8px; padding: 8px 12px; }
  .builder-workspace .palette-block { min-height: 86px; font-size: 16px; }
  .builder-workspace .try-site-button { padding: 10px 14px; font-size: 17px; }
}
@media(max-width:900px) and (min-width:721px) {
  .builder-workspace .builder-layout { grid-template-columns: 148px minmax(0,1fr) 250px; }
  .builder-workspace[data-view=build][data-linked-code=true] .builder-layout { grid-template-columns: 148px minmax(0,1fr) 270px; }
  .builder-workspace .block-palette { padding: 18px 9px; }
  .builder-workspace .block-palette h2 { font-size: 20px; }
  .builder-workspace .block-palette-items { gap: 9px 6px; }
  .builder-workspace .palette-block { font-size: 15px; min-height: 83px; padding: 8px 3px; }
  .builder-workspace .builder-history button { font-size: 14px; padding: 8px; min-width: 44px; }
  .builder-workspace .builder-views button { min-width: 76px; padding: 8px; font-size: 16px; }
  .builder-workspace .block-inspector { padding: 14px 12px; }
}
@media(min-width:721px) and (max-height:850px) {
  .builder-workspace .block-palette { padding-top: 12px; }
  .toolbox-heading p { margin-bottom: 12px; }
  .builder-workspace .palette-block { min-height: 64px; padding: 6px 3px; gap: 3px; font-size: 16px; border-radius: 11px; }
  .builder-workspace .toolbox-symbol { height: 28px; width: 34px; }
  .builder-workspace .tool-divider { min-height: 44px; }
  .builder-workspace .canvas-media { margin-top: 14px; padding-top: 12px; }
  .canvas-media-featured { grid-template-columns: repeat(4,72px); overflow-x: auto; padding: 0 2px 6px; scrollbar-width: thin; scroll-snap-type: x proximity; }
  .builder-workspace .canvas-media-friend { min-height: 80px; scroll-snap-align: start; }
  .canvas-media-friend .canvas-media-thumbnail { height: 44px; }
  .canvas-media>.canvas-media-tip { display: none; }
  .canvas-media-heading { margin-bottom: 10px; }
  .inspector-welcome { display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left; }
  .inspector-welcome img { width: 52px; height: 64px; flex-shrink: 0; }
  .builder-workspace .inspector-welcome h2 { font-size: 17px; margin: 0 0 5px; }
  .inspector-welcome p { font-size: 14px; }
}
@media(max-width:720px) {
  .builder-workspace .builder-toolbar { height: auto; position: static; padding: 10px; flex-wrap: wrap; }
  .builder-views { margin-right: auto; order: 0; }
  .builder-workspace .builder-views button { min-width: 74px; padding: 8px 10px; font-size: 16px; }
  .builder-workspace .builder-views button>span { display: none; }
  .builder-workspace .try-site-button { order: 1; padding: 9px 12px; font-size: 16px; gap: 6px; }
  .builder-history { order: 2; flex-basis: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .builder-workspace .builder-layout,.builder-workspace[data-view=build][data-linked-code=true] .builder-layout { display: flex; flex-direction: column; }
  .builder-workspace .site-pages { padding: 6px 10px; }
  .builder-workspace .block-palette { padding: 18px 14px; overflow: visible; }
  .builder-workspace .block-palette>p { margin-bottom: 14px; }
  .builder-workspace .block-palette-items { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
  .builder-workspace .palette-block { min-height: 86px; font-size: 16px; }
  .builder-workspace .tool-divider { grid-column: auto; }
  .builder-workspace .block-inspector { padding: 22px 18px; }
  .builder-workspace .builder-stage { padding: 26px 10px; }
  .block-inspector .choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) {
  .builder-workspace .palette-block,.builder-workspace .toolbox-symbol { transition: none; }
  .palette-block:hover .toolbox-symbol,.palette-block:focus-visible .toolbox-symbol { transform: none; }
  .choice-tile:is(:hover,:focus-visible) .choice-picture { animation: none!important; transform: none!important; filter: none!important; }
}