.artboard-section { padding-top: 0; }
.artboard-section .section-heading > p { max-width: 365px; }
.scope-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.artboard-demo { border: 1px solid #d1d4c8; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 45px #2633260a; }
.artboard-demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; background: #f0f0e8; border-bottom: 1px solid #d1d4c8; font-size: 12px; color: #5e6956; }
.artboard-demo-bar > span { display: flex; align-items: center; gap: 9px; }
.artboard-demo-bar .icon { width: 17px; height: 17px; }
.artboard-motion { display: flex; align-items: center; gap: 7px; padding: 5px 0 5px 10px; color: #394c32; font-size: 12px; min-height: 30px; }
.artboard-motion:hover { color: #a74428; }
.artboard-motion .icon { width: 11px; height: 11px; }
.artboard-demo-body { display: grid; grid-template-columns: 235px minmax(0, 1fr); min-height: 420px; }
.scope-panel { background: #282c28; color: #e5e9e1; padding: 22px 16px; }
.scope-panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 5px 17px; font-size: 14px; font-weight: 600; border-bottom: 1px solid #41483d; }
.scope-count { background: #444e3e; color: #e5eddd; font-size: 11px; padding: 3px 7px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.scope-board-name { display: flex; align-items: center; gap: 8px; padding: 19px 5px 14px; font-size: 12px; color: #e7eece; }
.scope-board-name .icon { width: 14px; height: 14px; color: #aab995; }
.scope-layer-list { list-style: none; margin: 0; padding: 0; }
.scope-layer-list[hidden] { display: none; }
.scope-layer { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 9px; border-radius: 4px; font-size: 11px; color: #d5dacd; }
.scope-layer:nth-child(2n) { background: #ffffff04; }
.scope-layer-type { width: 14px; text-align: center; color: #9ba992; font-size: 13px; }
.scope-layer > .icon { width: 12px; height: 12px; margin-left: auto; color: #87927f; }
.scope-panel.is-updating .scope-layer { animation: scope-layer-in .45s both; animation-delay: calc(var(--row) * 35ms); }
.scope-canvas { position: relative; display: flex; align-items: center; gap: 5%; padding: 55px 5% 65px; background-color: #e6e9df; background-image: radial-gradient(#b5bcaa 0.7px, transparent 0.7px); background-size: 13px 13px; }
.scope-artboard { position: relative; display: block; padding: 0; flex-shrink: 0; text-align: left; background: #f7f7f0; box-shadow: 0 4px 10px #293b2712; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .25s, box-shadow .25s; }
.scope-artboard:hover { outline-color: #a3b195; }
.scope-artboard[aria-pressed="true"] { outline-color: #647f51; box-shadow: 0 7px 25px #293b2720; }
.scope-artboard:focus-visible, .artboard-motion:focus-visible { outline: 3px solid #b45836; outline-offset: 5px; }
.scope-artboard-name { position: absolute; bottom: calc(100% + 12px); left: 0; white-space: nowrap; font-size: 11px; color: #69745e; }
.scope-artboard[aria-pressed="true"] .scope-artboard-name { color: #304c25; font-weight: 700; }
.scope-artboard[aria-pressed="true"] .scope-artboard-name::before { content: ''; display: inline-block; width: 5px; height: 5px; background: #647f51; border-radius: 50%; vertical-align: 2px; margin-right: 5px; }
.scope-artboard img { display: block; width: 100%; height: auto; pointer-events: none; }
.scope-web { width: 45%; }
.scope-mobile { width: 16%; margin-top: 25px; }
.scope-logo { width: 25%; margin-top: -20px; }
.scope-logo-art { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1.18; padding: 17%; gap: 15px; }
.scope-logo-art > img { width: 100%; }
.scope-logo-palette { display: flex; gap: 4px; }
.scope-logo-palette > i { width: 9px; height: 9px; border-radius: 50%; background: var(--swatch); }
.scope-canvas-note { position: absolute; left: 5%; bottom: 21px; display: flex; align-items: center; gap: 7px; font-size: 11px; color: #69745e; }
.scope-canvas-note .icon { width: 13px; height: 13px; }
.scope-cursor { position: absolute; pointer-events: none; z-index: 3; width: 25px; height: 32px; left: 25%; top: 57%; opacity: 0; transition: left .8s cubic-bezier(.3,0,.2,1), top .8s cubic-bezier(.3,0,.2,1), opacity .2s; filter: drop-shadow(1px 3px 2px #1a281b30); }
.scope-cursor > svg { width: 25px; height: 32px; overflow: visible; }
.scope-cursor::after { content: ''; position: absolute; width: 34px; height: 34px; left: -16px; top: -15px; border-radius: 50%; border: 2px solid #647f51; opacity: 0; }
.scope-cursor.is-clicking::after { animation: scope-click .6s ease-out; }
.scope-cursor.is-clicking > svg { animation: scope-press .3s ease; }
.artboard-demo-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 19px; font-size: 13px; line-height: 1.7; color: #626b59; }
.scope-selection { color: #425d33; font-weight: 550; }
@keyframes scope-layer-in { from { opacity: 0; transform: translateX(-9px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scope-click { from { opacity: .7; transform: scale(.3); } to { opacity: 0; transform: scale(1.4); } }
@keyframes scope-press { 50% { transform: scale(.85); } }
@media (max-width: 1000px) {
  .artboard-demo-body { grid-template-columns: 205px minmax(0, 1fr); min-height: 370px; }
  .scope-panel { padding: 19px 10px; }
  .scope-canvas { gap: 4%; padding-inline: 4%; }
  .scope-web { width: 46%; } .scope-mobile { width: 17%; } .scope-logo { width: 25%; }
}
@media (max-width: 700px) {
  .artboard-demo-body { display: flex; flex-direction: column-reverse; }
  .scope-canvas { min-height: 295px; padding: 47px 5% 51px; gap: 5%; }
  .scope-panel { padding: 17px 18px; min-height: 240px; }
  .scope-panel-heading { padding-bottom: 12px; }
  .scope-board-name { padding-block: 13px 10px; }
  .scope-layer-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
  .scope-layer { height: 30px; font-size: 11px; min-width: 0; }
  .scope-layer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scope-web { width: 45%; } .scope-mobile { width: 16%; } .scope-logo { width: 25%; }
  .scope-artboard-name { font-size: 10px; }
  .scope-logo-art { gap: 10px; }
  .scope-logo-palette { gap: 3px; }
  .scope-logo-palette > i { width: 7px; height: 7px; }
  .scope-cursor { transform: scale(.8); transform-origin: top left; }
  .artboard-demo-caption { align-items: flex-start; flex-direction: column; gap: 3px; }
}
@media (max-width: 400px) {
  .artboard-demo-bar { padding: 12px; gap: 8px; }
  .artboard-demo-bar > span { font-size: 11px; gap: 5px; }
  .artboard-motion { font-size: 11px; }
  .scope-canvas { min-height: 240px; }
  .scope-panel { padding-inline: 10px; }
  .scope-layer { gap: 6px; padding-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .scope-artboard, .scope-cursor { transition: none; }
  .scope-panel.is-updating .scope-layer, .scope-cursor.is-clicking::after, .scope-cursor.is-clicking > svg { animation: none; }
  .scope-cursor { display: none; }
}