/* Shared shell uses the site's theme. The editor is always a neutral surface for judging images. */
.sb-page { max-width: 1200px; padding: 32px 24px 80px; margin: auto; }
.sb-intro { margin: 12px 0 30px; max-width: 790px; }
.sb-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--color-primary); }
.sb-intro h1 { font-size: clamp(30px, 4.5vw, 52px); line-height: 1.12; font-weight: 650; letter-spacing: -.045em; margin: 12px 0; }
.sb-lead { font-size: clamp(17px, 2vw, 22px); line-height: 1.5; }
.sb-description { margin-top: 10px; font-size: 14px; line-height: 1.7; opacity: .65; max-width: 660px; }
.sb-local { font-size: 12px; margin-top: 18px; display: flex; gap: 7px; align-items: center; }
.sb-local span { color: #16856d; }
.sb-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; border: 1px solid var(--color-base-300); border-radius: 22px; overflow: hidden; background: var(--color-base-200); box-shadow: 0 12px 50px #17255408; }
.sb-workspace { min-width: 0; padding: 22px; background: var(--color-base-100); display: flex; flex-direction: column; }
.sb-preview-heading { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; font-weight: 600; margin-bottom: 16px; }
#sb-source { max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .55; font-weight: 400; }
.sb-stage { display: flex; justify-content: center; align-items: center; min-height: 340px; height: 440px; padding: 22px; border: 1px solid var(--color-base-300); border-radius: 12px; background-color: var(--color-base-300); }
.sb-stage.sb-transparent { background-color: #e5e7eb; background-image: conic-gradient(#d5d8dd 25%, transparent 0 50%, #d5d8dd 0 75%, transparent 0); background-size: 16px 16px; }
#sb-canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 5px 18px #0f172a12; }
.sb-dimensions { display: flex; flex-wrap: wrap; gap: 5px 16px; justify-content: center; font-size: 10px; opacity: .6; padding: 10px 0 15px; min-height: 35px; }
.sb-drop { margin-top: auto; padding: 19px 12px; display: flex; align-items: center; flex-direction: column; gap: 6px; border: 1px dashed var(--color-base-300); border-radius: 12px; text-align: center; }
.sb-drop > svg { color: var(--color-primary); margin-bottom: 3px; }
.sb-drop strong { font-size: 13px; font-weight: 600; }
.sb-drop > span, .sb-drop small { font-size: 11px; opacity: .6; }
.sb-file-actions { display: flex; align-items: center; gap: 5px; margin: 7px 0; }
.sb-file-input { width: 1px; height: 1px; clip-path: inset(50%); position: absolute; overflow: hidden; }
.sb-file-actions:has(input:focus-visible) label { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.sb-dragging .sb-stage, .sb-dragging .sb-drop { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.sb-inspector { padding: 22px; border-left: 1px solid var(--color-base-300); display: flex; flex-direction: column; gap: 17px; font-size: 12px; }
.sb-inspector fieldset { min-width: 0; }
.sb-inspector legend { margin-bottom: 12px; font-weight: 650; }
.sb-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sb-preset { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 9px; cursor: pointer; }
.sb-swatch { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; border: 1px solid #0000000a; }
.sb-preset[aria-pressed="true"] .sb-swatch { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.sb-aurora { background: linear-gradient(135deg, #c7d2fe, #a7f3d0, #f0fdfa); }
.sb-sunset { background: linear-gradient(135deg, #fecaca, #fdba74, #fef3c7); }
.sb-ocean { background: linear-gradient(135deg, #a5f3fc, #93c5fd, #c4b5fd); }
.sb-paper { background: linear-gradient(135deg, #ede9e4, #f7f5f0, #e7e5df); }
.sb-midnight { background: linear-gradient(135deg, #172554, #312e81, #0f172a); }
.sb-inspector label { display: grid; gap: 7px; font-weight: 500; }
.sb-inspector select { width: 100%; border: 1px solid var(--color-base-300); border-radius: 8px; padding: 8px 10px; font-size: 12px; background: var(--color-base-100); color: var(--color-base-content); }
.sb-inspector input[type="color"] { height: 34px; width: 100%; cursor: pointer; border-radius: 6px; }
.sb-inspector .sb-slider { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; }
.sb-slider output { opacity: .5; font-variant-numeric: tabular-nums; font-size: 11px; }
.sb-slider input { grid-column: 1 / -1; width: 100%; height: 18px; accent-color: var(--color-primary); cursor: pointer; }
.sb-reset { font-size: 11px; text-align: left; color: var(--color-primary); cursor: pointer; width: fit-content; }
.sb-reset:hover { text-decoration: underline; }
.sb-export { border-top: 1px solid var(--color-base-300); padding-top: 16px; display: grid; gap: 12px; }
.sb-export h2 { font-weight: 650; font-size: 13px; }
.sb-export p { font-size: 10px; line-height: 1.6; opacity: .6; }
.sb-status { grid-column: 1 / -1; padding: 0 22px; font-size: 12px; line-height: 1.6; }
.sb-status:not(:empty) { padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--color-base-300); }
.sb-status[data-error="true"] { color: var(--color-error); }
.sb-no-js { padding: 16px; }
.sb-how { margin: 64px 0; }
.sb-how h2, .sb-faq h2, .sb-app h2 { font-size: 22px; letter-spacing: -.025em; font-weight: 600; margin-bottom: 20px; }
.sb-how ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sb-how li > span { font-size: 11px; letter-spacing: .1em; color: var(--color-primary); }
.sb-how li p { font-size: 13px; line-height: 1.8; margin-top: 8px; opacity: .7; }
.sb-faq { max-width: 800px; margin: 0 auto 60px; }
.sb-faq details { border-bottom: 1px solid var(--color-base-300); padding: 18px 0; }
.sb-faq summary { font-size: 14px; cursor: pointer; font-weight: 500; }
.sb-faq details p { font-size: 13px; line-height: 1.8; opacity: .65; padding-top: 12px; }
.sb-app { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 28px; border: 1px solid var(--color-base-300); border-radius: 18px; }
.sb-app h2 { margin-bottom: 8px; font-size: 19px; }
.sb-app p { font-size: 13px; opacity: .65; }
.sb-tool-card { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--color-base-300); border-radius: 20px; max-width: 900px; margin: 40px 0; }
.sb-card-art { display: grid; place-items: center; min-height: 260px; padding: 45px; background: linear-gradient(135deg, #c7d2fe, #a7f3d0, #f0fdfa); }
.sb-card-window { width: 100%; max-width: 300px; padding: 14px; border-radius: 10px; background: #fcfcfa; box-shadow: 0 12px 24px #17255426; }
.sb-card-window > span { display: inline-block; width: 6px; height: 6px; background: #d5d6d0; border-radius: 50%; }
.sb-card-window > div { height: 100px; margin-top: 12px; border-radius: 5px; background: linear-gradient(135deg, #f0f2f4 25%, #e4e9f0 25% 30%, #f0f2f4 30% 50%, #d6e4df 50% 55%, #f0f2f4 55%); }
.sb-card-copy { padding: 32px; align-self: center; }
.sb-card-copy h2 { font-size: 24px; font-weight: 600; margin: 10px 0; letter-spacing: -.025em; }
.sb-card-copy p { font-size: 13px; line-height: 1.8; opacity: .65; margin-bottom: 20px; }
.sb-card-copy strong { font-size: 13px; color: var(--color-primary); }
.sb-page [hidden] { display: none !important; }
.sb-page :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
@media (max-width: 800px) {
  .sb-page { padding: 24px 16px 48px; }
  .sb-intro { margin-top: 8px; }
  .sb-editor { grid-template-columns: minmax(0, 1fr); }
  .sb-inspector { border-left: 0; border-top: 1px solid var(--color-base-300); }
  .sb-stage { height: 320px; min-height: 220px; padding: 12px; }
  .sb-workspace { padding: 16px; }
  .sb-presets { max-width: 330px; }
  .sb-how ol { grid-template-columns: 1fr; gap: 20px; }
  .sb-app { flex-direction: column; align-items: start; padding: 22px; }
  .sb-tool-card { grid-template-columns: 1fr; }
}