:root {
  --ws-bg: #f5f4ef;
  --ws-surface: #ffffff;
  --ws-ink: #1d252c;
  --ws-muted: #5d6a72;
  --ws-line: #d9d6cd;
  --ws-accent: #135c63;
  --ws-accent-ink: #ffffff;
  --ws-warn: #8a5a12;
  --ws-danger: #8b2f2f;
  --ws-shadow: 0 18px 45px rgba(20, 30, 35, 0.14);
  --ws-radius: 14px;
  font-family: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ws-bg);
  color: var(--ws-ink);
  line-height: 1.45;
}

button,
input,
select {
  font: inherit;
}

[hidden] {
  display: none !important;
}

#ws-app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 20px 50px;
}

.ws-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 2px 16px;
  border-bottom: 1px solid var(--ws-line);
}

.ws-header h1 {
  margin: 0;
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  letter-spacing: -0.01em;
}

.ws-progress {
  color: var(--ws-muted);
  font-size: 0.88rem;
  white-space: nowrap;
}

.ws-main {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.ws-task-card {
  background: var(--ws-surface);
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius);
  padding: 14px 18px;
  box-shadow: 0 4px 14px rgba(20, 30, 35, 0.04);
}

.ws-task-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ws-accent);
}

.ws-task-text {
  margin: 4px 0 2px;
  font-size: 1.06rem;
  font-weight: 650;
}

.ws-task-hint {
  margin: 0;
  color: var(--ws-muted);
  font-size: 0.9rem;
}

.ws-task-answers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ws-task-answers button {
  border: 1px solid var(--ws-line);
  background: #fbfbf9;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}

.ws-task-answers button:hover {
  border-color: var(--ws-accent);
}

.ws-task-answers button.ws-selected {
  background: var(--ws-accent);
  border-color: var(--ws-accent);
  color: var(--ws-accent-ink);
}

.ws-task-thanks {
  margin-top: 10px;
  color: var(--ws-accent);
  font-weight: 650;
}

.ws-viewport {
  position: relative;
  min-height: 540px;
  background: var(--ws-surface);
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius);
  overflow: hidden;
  box-shadow: var(--ws-shadow);
}

.ws-site-content {
  min-height: 540px;
  padding: 42px clamp(22px, 5vw, 72px);
  transition: filter 160ms ease;
}

.ws-site-content.ws-locked {
  filter: blur(1.4px);
  pointer-events: none;
  user-select: none;
}

.ws-site-brand {
  color: var(--ws-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ws-kicker {
  margin: 26px 0 4px;
  color: var(--ws-accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ws-site-page h1 {
  margin: 4px 0 14px;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  letter-spacing: -0.03em;
}

.ws-site-page p {
  max-width: 54ch;
  margin: 0;
  font-size: 1.08rem;
  color: #344048;
}

.ws-banner-layer,
.ws-assistant-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ws-banner-layer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  background: linear-gradient(to bottom, rgba(20, 30, 35, 0.02), rgba(20, 30, 35, 0.34));
  pointer-events: auto;
}

.ws-banner {
  width: min(760px, 100%);
  background: var(--ws-surface);
  border: 1px solid var(--ws-line);
  border-radius: 18px;
  padding: 20px 22px 18px;
  box-shadow: var(--ws-shadow);
}

.ws-banner-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ws-banner h2 {
  margin: 0;
  font-size: 1.18rem;
}

.ws-banner p {
  margin: 8px 0 0;
  color: var(--ws-muted);
}

.ws-countdown {
  color: var(--ws-warn);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.ws-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.ws-banner-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ws-button {
  border: 1px solid var(--ws-line);
  background: #fbfbf9;
  color: var(--ws-ink);
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
}

.ws-button:hover {
  border-color: var(--ws-accent);
}

.ws-button-primary {
  background: var(--ws-accent);
  border-color: var(--ws-accent);
  color: var(--ws-accent-ink);
  font-weight: 700;
}

.ws-button-primary:hover {
  filter: brightness(1.05);
}

.ws-button-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ws-muted);
  text-decoration: underline;
  padding-left: 4px;
  padding-right: 4px;
}

.ws-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.ws-settings {
  margin-top: 16px;
  border-top: 1px solid var(--ws-line);
  padding-top: 14px;
}

.ws-settings h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.ws-settings p {
  margin: 0 0 10px;
  font-size: 0.9rem;
}

.ws-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed #e8e5dc;
}

.ws-toggle-row:last-child {
  border-bottom: 0;
}

.ws-toggle-label {
  display: grid;
  gap: 1px;
}

.ws-toggle-label strong {
  font-size: 0.95rem;
}

.ws-toggle-label span {
  color: var(--ws-muted);
  font-size: 0.78rem;
}

.ws-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
}

.ws-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ws-switch span {
  position: absolute;
  inset: 0;
  background: #c9c6bc;
  border-radius: 999px;
  transition: background 120ms ease;
}

.ws-switch span::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: white;
  transition: transform 120ms ease;
}

.ws-switch input:checked + span {
  background: var(--ws-accent);
}

.ws-switch input:checked + span::after {
  transform: translateX(20px);
}

.ws-switch input:disabled + span {
  opacity: 0.5;
}

.ws-locked-label {
  color: var(--ws-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.ws-cue {
  outline: 3px solid #d38b1f !important;
  outline-offset: 3px;
  animation: ws-pulse 1.4s ease-in-out infinite;
}

@keyframes ws-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(211, 139, 31, 0.25); }
  50% { box-shadow: 0 0 0 7px rgba(211, 139, 31, 0.12); }
}

.ws-assistant {
  position: absolute;
  right: 22px;
  bottom: 24px;
  width: min(390px, calc(100% - 44px));
  background: #fdfcf8;
  border: 1px solid #d7c9a9;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 12px 32px rgba(20, 30, 35, 0.18);
  pointer-events: auto;
}

.ws-assistant-label {
  color: var(--ws-warn);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ws-assistant p {
  margin: 5px 0 0;
  font-size: 0.92rem;
}

.ws-badge {
  display: inline-block;
  margin-top: 8px;
  border-radius: 999px;
  background: #f2e1bd;
  color: #5d400d;
  padding: 3px 9px;
  font-size: 0.78rem;
  font-weight: 700;
}

.ws-assistant-spinner {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--ws-warn);
  animation: ws-blink 0.9s ease-in-out infinite;
}

@keyframes ws-blink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.ws-toast-layer {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 36px));
}

.ws-toast {
  background: #1f2d32;
  color: #f6f6f2;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--ws-shadow);
  font-size: 0.9rem;
}

.ws-toast-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.ws-toast button {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #ffffff;
  border-radius: 8px;
  padding: 5px 9px;
  cursor: pointer;
  font-size: 0.8rem;
}

.ws-drawer {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 9px;
}

.ws-drawer h4 {
  margin: 0 0 4px;
  font-size: 0.86rem;
}

.ws-drawer p {
  margin: 0;
  color: #d9e4e5;
  font-size: 0.84rem;
}

.ws-source {
  margin-top: 6px;
  color: #b7c8ca;
  font-size: 0.75rem;
}

.ws-panel {
  margin-top: 18px;
  background: var(--ws-surface);
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius);
  padding: 20px;
}

.ws-completion h2,
.ws-error h2 {
  margin: 0 0 6px;
}

.ws-fallback {
  margin-top: 16px;
  display: grid;
  gap: 8px;
  max-width: 720px;
}

.ws-fallback input {
  width: 100%;
  border: 1px solid var(--ws-line);
  border-radius: 8px;
  padding: 9px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  background: #f8f7f3;
}

.ws-error {
  border-color: #e3b7b7;
  background: #fff7f7;
}

.ws-preview-bar {
  margin-top: 12px;
  background: #18252a;
  color: #eef4f4;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.ws-preview-bar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}

.ws-preview-bar select,
.ws-preview-bar input[type="text"] {
  background: #26363c;
  color: #ffffff;
  border: 1px solid #41555c;
  border-radius: 6px;
  padding: 4px 6px;
}

.ws-preview-spacer {
  flex: 1;
}

.ws-preview-inspector {
  margin-top: 12px;
  background: #101a1d;
  border: 1px solid #2e444a;
  border-radius: 12px;
  padding: 12px;
  color: #d9e7e7;
  font-size: 0.8rem;
}

.ws-preview-inspector h3 {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.ws-preview-inspector pre {
  margin: 0;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.ws-preview-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ws-preview-toggles label {
  background: #26363c;
  border-radius: 999px;
  padding: 4px 8px;
}

.ws-preview-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ws-preview-jump button {
  border: 1px solid #41555c;
  background: #26363c;
  color: #fff;
  border-radius: 6px;
  padding: 4px 7px;
  cursor: pointer;
  font-size: 0.75rem;
}

.ws-preview-jump button:hover {
  border-color: #8ab4b8;
}

.ws-meter {
  display: inline-block;
  min-width: 72px;
  height: 8px;
  background: #2e444a;
  border-radius: 999px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 6px;
}

.ws-meter i {
  display: block;
  height: 100%;
  background: #6fb3a8;
}

@media (max-width: 760px) {
  #ws-app {
    padding: 10px 10px 36px;
  }

  .ws-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .ws-viewport,
  .ws-site-content {
    min-height: 500px;
  }

  .ws-site-content {
    padding: 26px 20px;
  }

  .ws-banner-layer {
    padding: 10px;
  }

  .ws-banner {
    padding: 16px;
  }

  .ws-assistant {
    right: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
  }

  .ws-toast-layer {
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
  }
}

.ws-pending {
  margin-top: 10px !important;
  color: var(--ws-warn) !important;
  font-size: 0.86rem !important;
  font-weight: 650;
}

.ws-preview-inspector {
  flex-basis: 100%;
}

.ws-next-disabled {
  opacity: 0.5;
}