.editor-start-dialog {
  position: fixed;
  inset: 0;
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 1.25rem;
  overflow: auto;
  border: 1px solid #303d4b;
  border-radius: 0.6rem;
  color: #edf4fb;
  background: #0d1219;
  box-shadow: 0 1.5rem 5rem #000b;
  font-size: 0.75rem;
}
.editor-start-dialog::backdrop { background: #02060bbf; }
.editor-start-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.editor-start-heading h2 { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.editor-start-dialog button { padding: 0.55rem 0.75rem; border: 1px solid #303d4b; border-radius: 0.3rem; color: #d5e1ec; background: #18212b; cursor: pointer; }
.editor-start-dialog button:hover { border-color: #65adf2; }
.editor-start-heading button { padding: 0; width: 1.8rem; height: 1.8rem; font-size: 1.1rem; }
.editor-start-dialog p { color: #a7b6c5; line-height: 1.55; }
.editor-start-dialog small { display: block; color: #8192a5; font-size: 0.65rem; }
.editor-start-dialog label { display: block; color: #aebdcc; font-size: 0.72rem; }
.editor-start-dialog input, .editor-start-dialog select { display: block; width: 100%; min-width: 0; margin-top: 0.4rem; padding: 0.6rem; border: 1px solid #303d4b; border-radius: 0.25rem; color: #edf4fb; background: #080d13; }
.editor-start-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; justify-items: center; gap: 0.4rem; min-width: 0; margin: 1rem 0; padding: 0; border: 0; }
.editor-start-presets legend { margin-bottom: 0.5rem; color: #aebdcc; font-size: 0.72rem; }
.editor-start-presets button { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 6rem; min-width: 0; aspect-ratio: var(--preset-ratio, 1); padding: 0.35rem 0.2rem; font-size: 0.68rem; line-height: 1.25; }
.editor-start-presets [data-start-size="1600,900"],
.editor-start-presets [data-start-size="1920,1080"] { --preset-ratio: 16 / 9; }
.editor-start-presets [data-start-size="1080,1350"] { --preset-ratio: 4 / 5; }
.editor-start-presets small { margin-top: 0.35rem; font-size: 0.6rem; white-space: nowrap; }
.editor-start-dimensions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin-bottom: 1rem; }
.editor-start-dimensions label > span { float: right; color: #8192a5; }
.editor-start-dialog .editor-start-error { min-height: 1.2em; margin: 0.8rem 0; color: #ffc3b7; font-size: 0.72rem; }
.editor-start-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.editor-start-actions .editor-start-primary { border-color: #386b9b; color: #ddecfc; background: #19446b; }
@media (max-width: 26rem) { .editor-start-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.editor-start-dialog [hidden] { display: none !important; }
.editor-start-dialog .editor-start-presets button[aria-pressed="true"],
.editor-start-dialog .editor-start-presets button[aria-pressed="true"]:hover {background:#fff!important;color:#080808!important;border-color:#fff!important;box-shadow:0 0 0 1px #fff4}
.editor-start-dialog .editor-start-presets button[aria-pressed="true"] small {color:#333!important}
.editor-preset-state {font-size:inherit;color:inherit}
.home-start-dialog .editor-start-error:empty { display: none; }

/* Shared Home/Gateway entry: 30% black surfaces, white medium type. */
#home-start-dialog.home-start-dialog,
#home-start-dialog .gateway-start-panel,
#home-start-dialog #recent-work {background:rgba(0,0,0,.3)!important}
#home-start-dialog,
#home-start-dialog * {
  --premium-action-weight:500!important;
  color:#fff!important;
  font-weight:500!important;
}
#home-start-dialog :is(button,input,select),
#home-start-dialog :is(button,input,select):is(:hover,:active,:focus-visible),
#home-start-dialog #editor-start-new :is(button,input,select),
#home-start-dialog #editor-start-new :is(#editor-start-create,[data-start-size]),
#home-start-dialog :is(#home-start-close,#home-start-open,#home-start-retry) {
  --premium-surface:rgba(0,0,0,.3)!important;
  --premium-text:#fff!important;
  --premium-border:transparent!important;
  background:rgba(0,0,0,.3)!important;
  border-color:transparent!important;
  outline:0!important;
  color:#fff!important;
  box-shadow:none!important;
}
/* Decorative button layers must not compound the requested surface opacity. */
#home-start-dialog button::before,
#home-start-dialog button::after {background:transparent!important}
#home-start-dialog :is(input,select) {border-color:transparent!important}
#home-start-dialog select option {background:#000;color:#fff}
#home-start-dialog [data-start-size][aria-pressed="true"],
#home-start-dialog [data-start-size][aria-pressed="true"]::before {
  --premium-border:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
#home-start-dialog [data-start-size][aria-pressed="true"] small {color:#fff!important}
/* Keep the close target beside the first action row without an empty heading row. */
#home-start-dialog .home-start-choices {padding-right:2.5rem}
#home-start-dialog #home-start-close {
  z-index:2;
  top:calc(1rem + 11px);
  right:calc(.5rem + 8px);
  width:28px;
  height:28px;
  min-width:0;
  min-height:0;
  font-size:1.75rem!important;
  line-height:1;
}
#home-start-dialog .editor-start-background-field {margin-top:.65rem}

/* Fine section dividers echo the Gateway axis without boxed control accents. */
#home-start-dialog :is(.home-start-choices,.editor-start-name-field,.editor-start-background-field,.editor-start-presets) {
  padding-bottom:.75rem;
  background:linear-gradient(90deg,transparent,#ffffff45,transparent) center bottom / 100% 1px no-repeat;
}
#home-start-dialog :is(.home-start-choices,.editor-start-dimensions) {position:relative}
#home-start-dialog .home-start-choices::before,
#home-start-dialog .editor-start-dimensions::before {
  content:"";position:absolute;top:.4rem;bottom:.8rem;width:1px;pointer-events:none;
  background:linear-gradient(transparent,#ffffff45,transparent);
}
#home-start-dialog .home-start-choices::before {left:calc((100% - 2.5rem) / 2)}
#home-start-dialog .editor-start-dimensions::before {left:50%;bottom:.2rem}
#home-start-dialog #editor-start-new [data-start-size] {
  --preset-line:#ffffff55;
  position:relative;border-radius:0;aspect-ratio:var(--preset-ratio,1);min-height:0;
}
#home-start-dialog #editor-start-new [data-start-size]::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent,var(--preset-line),transparent) center top / 100% 1px no-repeat,
    linear-gradient(90deg,transparent,var(--preset-line),transparent) center bottom / 100% 1px no-repeat,
    linear-gradient(transparent,var(--preset-line),transparent) left center / 1px 100% no-repeat,
    linear-gradient(transparent,var(--preset-line),transparent) right center / 1px 100% no-repeat!important;
}
#home-start-dialog #editor-start-new [data-start-size][aria-pressed="true"] {--preset-line:#ffffffdd}
/* Keyboard focus remains clear through an underline rather than a surrounding box. */
#home-start-dialog #editor-start-new :is(#editor-start-create,[data-start-size],input,select):focus-visible,
#home-start-dialog :is(#home-start-open,#home-start-close,#home-start-retry):focus-visible {
  box-shadow:inset 0 -1px 0 #ffffffb0!important;
}

@keyframes editor-entry-slide-in {
  from {translate:100vw 0;opacity:0}
  to {translate:0 0;opacity:1}
}
#home-start-dialog[open] {animation:editor-entry-slide-in .32s cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce) {
  #home-start-dialog[open] {animation:none}
}