body:has([data-startup-shell], .app-frame.signed-out) {
  min-width: 0;
}

:is(.startup-shell, .app-frame.signed-out, .project-startup) {
  color: var(--appearance-ink);
  color-scheme: var(--appearance-scheme);
  background-color: var(--appearance-bg);
  font-family: var(--nov05-font-data);
}

.entry-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--appearance-ink);
  font: 400 22px/1.2 var(--nov05-font-hand);
}

.entry-brand > span:not(.reference-logo-mark) {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--appearance-line);
  border-radius: 50%;
  background: var(--appearance-surface);
  font: 19px/1 Georgia, serif;
}

.app-frame.signed-out {
  height: 100dvh;
  min-height: 0;
  scrollbar-gutter: auto;
}

.app-frame.signed-out .welcome-topbar {
  flex-basis: 72px;
  width: min(calc(100% - 48px), 1160px);
  margin-inline: auto;
  padding-inline: 0;
  border-bottom: 1px solid var(--appearance-line);
  font: inherit;
  font-family: var(--nov05-font-hand);
  font-size: 22px;
}

.app-frame.signed-out .welcome-page {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
  justify-content: initial;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  width: min(calc(100% - 48px), 1160px);
  min-height: calc(100dvh - 72px);
  margin: 0 auto;
  padding: 40px 0 64px;
  color: inherit;
  animation: none;
}

.welcome-sketch { min-width: 0; }

.login-sketch-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--appearance-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-sketch-svg :is(.sketch-trace, .sketch-guides, .sketch-sheet-frame, .sketch-dimensions) {
  fill: none;
  stroke: currentColor;
}

.sketch-sheet-frame { stroke-width: 1.15; opacity: .46; }
.sketch-guides { stroke-width: 1; stroke-dasharray: 4 7; opacity: .27; }
.sketch-trace { stroke-width: 1.45; }
.sketch-trace.sketch-strong { stroke-width: 2.2; }
.sketch-stage-detail { opacity: .8; }
.sketch-pencil-echo { opacity: .35; }
.sketch-dimensions { --sketch-opacity: .7; stroke-width: 1.1; opacity: var(--sketch-opacity); }
.sketch-dimensions text {
  fill: currentColor;
  stroke: none;
  font: 14px/1 var(--nov05-font-data);
  letter-spacing: .1em;
}

.sketch-land { fill: color-mix(in srgb, var(--appearance-surface) 26%, var(--appearance-bg)); }
.sketch-paper { fill: var(--appearance-surface); }
.sketch-side { fill: color-mix(in srgb, var(--appearance-edge) 23%, var(--appearance-surface)); }
.sketch-glass { fill: color-mix(in srgb, var(--appearance-edge) 14%, var(--appearance-bg)); }

@media (prefers-reduced-motion: no-preference) {
  .login-sketch-svg .sketch-stage-ground { --sketch-delay: 70ms; --sketch-duration: 850ms; }
  .login-sketch-svg .sketch-stage-structure { --sketch-delay: 670ms; --sketch-duration: 1100ms; }
  .login-sketch-svg .sketch-stage-detail { --sketch-delay: 1480ms; --sketch-duration: 1240ms; }

  .login-sketch-svg .sketch-trace {
    stroke-dasharray: 1;
    animation: login-sketch-trace var(--sketch-duration) cubic-bezier(.3, .65, .25, 1)
      calc(var(--sketch-delay) + var(--sketch-trace-offset, 0ms)) backwards;
  }
  .login-sketch-svg .sketch-stage-structure > :nth-child(n+8) { --sketch-trace-offset: 105ms; }
  .login-sketch-svg .sketch-stage-structure > :nth-child(n+17) { --sketch-trace-offset: 175ms; }
  .login-sketch-svg .sketch-stage-detail > :nth-child(n+15) { --sketch-trace-offset: 130ms; }
  .login-sketch-svg .sketch-fill {
    animation: login-sketch-fill 600ms ease-out calc(var(--sketch-delay) + 240ms) backwards;
  }
  .login-sketch-svg .sketch-dimensions {
    animation: login-sketch-fill 530ms ease-out 2110ms backwards;
  }
}

@keyframes login-sketch-trace {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes login-sketch-fill {
  from { opacity: 0; }
  to { opacity: var(--sketch-opacity, 1); }
}

.app-frame.signed-out [data-welcome-login] {
  width: min(100%, 420px);
  justify-self: stretch;
}

.welcome-login-form, dialog[data-workflow-login], dialog[data-wx-landing] {
  background: var(--appearance-surface);
  border: 1px solid var(--appearance-line);
  border-radius: 16px;
  color: var(--appearance-ink);
  color-scheme: var(--appearance-scheme);
  font-family: var(--nov05-font-data);
}

.app-frame.signed-out .welcome-login-form {
  max-width: none;
  padding: clamp(20px, 3vw, 34px);
  border-radius: 4px;
}

.app-frame.signed-out .welcome-login-form header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--appearance-line);
}

.app-frame.signed-out .welcome-login-form h1 {
  margin: 0;
  color: var(--appearance-ink);
  font: 400 26px/1.25 var(--nov05-font-display);
}

dialog:is([data-workflow-login], [data-wx-landing]) {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 26px;
  overflow: auto;
}

dialog:is([data-workflow-login], [data-wx-landing])::backdrop {
  background: rgba(12, 15, 13, .66);
}

:is([data-workflow-login], [data-wx-landing]) header strong {
  color: var(--appearance-ink);
  font: 400 25px/1.35 var(--nov05-font-display);
}

:is(.welcome-login-form, dialog[data-workflow-login]) label {
  display: block;
  margin: 0 0 16px;
  color: var(--appearance-secondary);
  font-size: 14px;
}

:is(.welcome-login-form, dialog[data-workflow-login]) input {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 7px;
  padding: 10px 12px;
  color: var(--appearance-ink);
  border: 1px solid var(--appearance-edge);
  border-radius: 8px;
  background: var(--appearance-chip);
  caret-color: var(--appearance-accent);
  font: 16px/1.4 var(--nov05-font-data);
}

:is([data-workflow-login], [data-wx-landing]) :is([role=status], [role=alert], [data-wx-login-hint]) {
  margin: 0 0 14px;
  color: var(--appearance-secondary);
  font: 14px/1.55 var(--nov05-font-data);
  overflow-wrap: anywhere;
}

[data-workflow-login] [role=alert] {
  padding-inline-start: 10px;
  border-inline-start: 2px solid currentColor;
  color: var(--appearance-ink);
}

[data-workflow-login] footer {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

:is(.welcome-login-form, dialog[data-workflow-login]) button[type=submit],
:is([data-startup-error], .project-load-message) button {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--appearance-accent);
  color: var(--appearance-accent-ink);
  cursor: pointer;
  font: 600 14px/1.35 var(--nov05-font-data);
}

.app-frame.signed-out .welcome-login-form button[type=submit] {
  background: var(--appearance-ink);
  color: var(--appearance-bg);
}

:is([data-workflow-login], [data-wx-landing]) :is([data-wx-login], footer button:not([type=submit])) {
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--appearance-edge);
  border-radius: 8px;
  background: var(--appearance-surface);
  color: var(--appearance-ink);
  font: 14px/1.35 var(--nov05-font-data);
  cursor: pointer;
}

:is([data-workflow-login], [data-wx-landing]) button:enabled:hover,
:is([data-startup-error], .project-load-message) button:enabled:hover { filter: brightness(.9); }
:is([data-workflow-login], [data-wx-landing], .project-load-message) button:disabled { opacity: .72; cursor: wait; }

:is([data-workflow-login], [data-wx-landing], [data-startup-error], .project-load-message) :focus-visible {
  outline: 2px solid var(--appearance-accent);
  outline-offset: 3px;
}

.startup-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
  padding: 19px clamp(20px, 6vw, 96px) 28px;
}

.startup-shell > .entry-brand {
  width: min(100%, 1160px);
  margin-inline: auto;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--appearance-line);
}

.startup-body {
  align-self: center;
  width: min(100%, 500px);
  margin: 0 auto 44px;
  padding: clamp(22px, 5vw, 44px);
  border: 1px solid var(--appearance-line);
  border-radius: 4px;
  background: var(--appearance-chip);
}

.startup-body.entry-loading-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: stretch;
  width: min(100%, 800px);
  padding: 0;
  border-radius: 2px;
  background: var(--appearance-surface);
  box-shadow: 0 16px 44px color-mix(in srgb, var(--appearance-ink) 9%, transparent);
}

.entry-loading-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 5vw, 56px);
}

.entry-loading-drawing {
  position: relative;
  display: grid;
  align-content: center;
  gap: 9px;
  min-height: 226px;
  padding: 26px clamp(22px, 5vw, 50px);
  border-inline-start: 1px solid var(--appearance-line);
  background: var(--appearance-chip);
  background-image: radial-gradient(circle, var(--appearance-dot) .6px, transparent .9px);
  background-size: 16px 16px;
}

.entry-loading-drawing > i {
  position: relative;
  height: 34px;
  border: 1px solid var(--appearance-line);
  background: color-mix(in srgb, var(--appearance-surface) 82%, transparent);
}

.entry-loading-drawing > i:nth-child(2) { margin-inline-start: 13%; }
.entry-loading-drawing > i:nth-child(3) { margin-inline-start: 26%; }

.entry-loading-drawing > i::before,
.entry-loading-drawing > i::after {
  position: absolute;
  width: 6px;
  height: 6px;
  border: 0 solid var(--appearance-muted);
  content: "";
}
.entry-loading-drawing > i::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.entry-loading-drawing > i::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

:is(.startup-body, .project-startup) h1 {
  margin: 0 0 12px;
  font: 400 clamp(27px, 4vw, 43px)/1.3 var(--nov05-font-display);
}

:is(.startup-body, .project-startup) p {
  color: var(--appearance-secondary);
  margin: 0 0 18px;
  font: 14px/1.6 var(--nov05-font-data);
  animation: none;
}

.entry-loading-line {
  width: min(100%, 240px);
  height: 2px;
  border-radius: 2px;
  background: var(--appearance-line);
  overflow: hidden;
}

.entry-loading-sheet .entry-loading-line { margin-top: 7px; }

.entry-loading-line::after {
  content: "";
  display: block;
  width: 36%;
  height: 100%;
  background: var(--appearance-accent);
  animation: entry-loading 1.5s ease-in-out infinite alternate;
}

@keyframes entry-loading { to { transform: translateX(178%); } }

.app-frame:has(.project-startup) .app-header {
  --project-shell-text: var(--appearance-ink);
  --project-shell-muted: var(--appearance-secondary);
  color: var(--appearance-ink);
  background: var(--appearance-surface);
  border-color: var(--appearance-line);
}

.app-frame:has(.project-startup) .project-header-context strong {
  font: 400 17px/1.3 var(--nov05-font-hand);
}

.app-frame .project-startup {
  display: grid;
  align-content: center;
  padding: clamp(24px, 5vw, 72px);
  animation: none;
}

.project-load-status[data-project-load-state] {
  background: var(--appearance-surface);
  border: 1px solid var(--appearance-line);
  color: var(--appearance-ink);
  border-radius: 5px;
  font: 14px/1.4 var(--nov05-font-data);
}

.project-load-status .project-load-indicator { color: var(--appearance-secondary); }

.startup-body details {
  margin-top: 18px;
  color: var(--appearance-secondary);
  font: 14px/1.55 var(--nov05-font-data);
}

.startup-body details summary { min-height: 36px; cursor: pointer; }

.project-load-message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  width: min(1380px, calc(100% - clamp(32px, 14vw, 216px)));
  margin: 0 auto 24px;
  padding: 12px 16px;
  border: 1px solid var(--appearance-line);
  border-radius: 12px;
  background: var(--appearance-surface);
  color: var(--appearance-ink);
}

.project-load-message p { margin: 0; font-size: 14px; }

.staff-directory-message {
  margin: 0;
  padding: 14px 16px;
  color: var(--appearance-secondary);
  font: 14px/1.5 var(--nov05-font-data);
}

.staff-directory-message button {
  min-height: 36px;
  color: var(--appearance-ink);
  border: 0;
  background: transparent;
  text-decoration: underline;
  cursor: pointer;
}

[data-directory-staff] small { display: block; color: var(--appearance-secondary); }

[data-staff-directory-panel] {
  z-index: 30;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 88px);
}

[data-staff-directory-panel] :is(.w1j-close, .staff-directory-expand) {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: none;
}

[data-staff-directory-panel] .w1j-dual { min-height: 0; }

@media (max-width: 880px) {
  [data-staff-directory-panel] {
    top: 108px;
    right: 12px;
    max-height: calc(100dvh - 120px);
  }
}

@media (max-width: 560px) {
  [data-staff-directory-panel] .w1j-dual { flex-direction: column-reverse; }
  [data-staff-directory-panel] .w1j-left { flex: none; }
  [data-staff-directory-panel] .w1j-right { width: auto; min-height: 0; border-inline-start: 0; }
  [data-staff-directory-panel] .w1j-divider { width: 100%; height: 1px; }
}

@media (max-width: 760px) {
  .app-frame.signed-out .welcome-topbar { flex-basis: 56px; }
  .app-frame.signed-out .welcome-page {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 16px;
    min-height: calc(100dvh - 56px);
    padding-block: 22px 32px;
  }
  .app-frame.signed-out [data-welcome-login] {
    width: min(100%, 420px);
    justify-self: center;
    grid-row: 1;
  }
  .app-frame.signed-out .welcome-sketch { width: min(100%, 440px); justify-self: center; }
  .login-sketch-svg { max-height: 28dvh; }
}

@media (max-width: 560px) {
  .startup-body.entry-loading-sheet { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
  .entry-loading-drawing {
    min-height: 0;
    padding: 17px 24px;
    border-inline-start: 0;
    border-top: 1px solid var(--appearance-line);
  }
  .entry-loading-drawing > i { height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .entry-loading-line::after { animation: none; }
}