:root {
  color-scheme: light;
  --workplace-cyan: #00a9bd;
  --workplace-ink: #17212b;
  --workplace-muted: #64717d;
  --workplace-border: #dce4e8;
  --workplace-surface: #ffffff;
  --workplace-bg: #f3f7f8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(circle at 80% 0, #e1f7f8, transparent 38%), var(--workplace-bg);
  color: var(--workplace-ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.workplace-shell {
  display: grid;
  min-height: 100vh;
  padding: 24px;
  place-items: center;
}

.workplace-card {
  width: min(100%, 680px);
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--workplace-border);
  border-radius: 24px;
  background: var(--workplace-surface);
  box-shadow: 0 24px 70px rgba(23, 33, 43, .1);
}

.workplace-shell--wide .workplace-card { width: min(100%, 920px); }
.workplace-mark { display: grid; width: 54px; height: 54px; border-radius: 18px; background: var(--workplace-cyan); color: #fff; font-size: 28px; font-weight: 800; place-items: center; }
.workplace-eyebrow { margin: 22px 0 4px; color: var(--workplace-cyan); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0 0 16px; font-size: clamp(28px, 5vw, 44px); line-height: 1.08; }
.workplace-notice { padding: 14px 16px; border-radius: 12px; background: #fff5dd; }
.workplace-status { display: flex; align-items: center; gap: 8px; margin-top: 30px; color: var(--workplace-muted); font-size: 14px; }
.workplace-status span { width: 9px; height: 9px; border-radius: 50%; background: #45a66b; box-shadow: 0 0 0 5px #e1f3e8; }
.workplace-search { margin-top: 30px; }
.workplace-search label { display: block; margin-bottom: 8px; font-weight: 700; }
.workplace-search div { display: flex; gap: 8px; }
.workplace-search input { min-width: 0; flex: 1; padding: 12px 14px; border: 1px solid var(--workplace-border); border-radius: 10px; font: inherit; }
.workplace-search button { padding: 12px 18px; border: 0; border-radius: 10px; background: var(--workplace-cyan); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.workplace-results { display: grid; gap: 10px; margin-top: 18px; }
.workplace-result { padding: 14px 16px; border: 1px solid var(--workplace-border); border-radius: 12px; }
.workplace-result strong { display: block; }
.workplace-result p { margin: 4px 0 0; color: var(--workplace-muted); }

@media (max-width: 480px) {
  .workplace-shell { padding: 12px; }
  .workplace-card { padding: 22px 18px; border-radius: 18px; }
  .workplace-search div { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}