:root {
  --ink:#18283d;
  --muted:#657184;
  --line:#e2e7ed;
  --blue:#245cdb;
  --bg:#f8fafc;
  --green:#26734d;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  font:14px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--bg);
}
button,input,select {
  font:inherit;
}
button,a,select {
  touch-action:manipulation;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:not-allowed;
  opacity:.5;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #85a8ff;
  outline-offset:3px;
}
[hidden] {
  display:none!important;
}
.sidebar {
  width:248px;
  position:fixed;
  inset:0 auto 0 0;
  background:white;
  border-right:1px solid var(--line);
  padding:33px 22px 20px;
  display:flex;
  flex-direction:column;
}
.brand {
  text-decoration:none;
  color:var(--ink);
  font-size:29px;
  font-weight:750;
  letter-spacing:-1.5px;
  padding-left:10px;
}
.brand span {
  color:var(--blue);
}
.brand small {
  display:block;
  font:9px/2 system-ui;
  letter-spacing:2px;
  color:var(--muted);
  margin-top:3px;
}
.workspace {
  display:flex;
  gap:12px;
  align-items:center;
  margin:40px 0 25px;
  padding:0 9px;
  font-size:12px;
  font-weight:600;
}
.workspace small,.identity small {
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:400;
}
.workspace-icon {
  background:#edf2fd;
  color:var(--blue);
  border-radius:9px;
  width:34px;
  height:34px;
  text-align:center;
  line-height:34px;
  font-size:21px;
  font-weight:700;
}
nav {
  display:grid;
  gap:6px;
}
.nav {
  width:100%;
  border:0;
  background:none;
  text-align:left;
  color:#536176;
  font-size:12px;
  padding:12px 11px;
  border-radius:7px;
  display:flex;
  align-items:center;
  gap:12px;
}
.nav>span {
  font-size:20px;
  line-height:1;
}
.nav.active {
  background:#edf3ff;
  color:var(--blue);
  font-weight:650;
}
.nav b {
  margin-left:auto;
  background:#dce8ff;
  border-radius:4px;
  padding:0 6px;
  font-size:10px;
}
.sidebar-note {
  margin-top:auto;
  background:#f7f8fa;
  border:1px solid #eceff3;
  border-radius:9px;
  padding:16px 13px;
  font-size:11px;
  color:var(--muted);
}
.sidebar-note strong {
  color:var(--ink);
  font-size:11px;
}
.sidebar-note p {
  margin-bottom:0;
}
.identity {
  display:flex;
  gap:10px;
  align-items:center;
  border-top:1px solid var(--line);
  padding:20px 5px 0;
  margin-top:22px;
  font-size:12px;
}
.avatar {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e9edf3;
  color:#536176;
  font-weight:600;
}
.shell {
  margin-left:248px;
}
.topbar {
  height:75px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 46px;
  font-size:12px;
}
.breadcrumb {
  color:var(--muted);
}
.breadcrumb span {
  margin:0 16px;
  color:#b9c1ce;
}
.breadcrumb strong {
  color:#3b495c;
  font-weight:500;
}
.top-actions {
  display:flex;
  align-items:center;
  gap:12px;
}
.top-actions select {
  font-size:11px;
  border:1px solid var(--line);
  border-radius:6px;
  padding:5px;
  background:#fff;
}
.dev-tag {
  font-size:10px;
  color:#8b6721;
  background:#fff4dc;
  padding:4px 8px;
  border-radius:4px;
}
main {
  max-width:1450px;
  margin:auto;
  padding:46px 46px 0;
}
.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  color:#697b91;
}
.hero {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 0 27px;
}
.hero h1,h1 {
  font:normal 48px/1.12 Georgia,"Times New Roman",serif;
  letter-spacing:-1.8px;
  margin:0 0 20px;
}
.hero p {
  color:var(--muted);
  line-height:1.9;
  font-size:13px;
}
.hero-mark {
  width:225px;
  height:170px;
  position:relative;
}
.mark-square {
  width:90px;
  height:90px;
  transform:rotate(-10deg);
  border:1px solid #bdcfee;
  background:#edf3ff;
  position:absolute;
  left:30px;
  top:10px;
  border-radius:20px;
  color:#4778cc;
  display:grid;
  place-items:center;
  font:bold 60px Georgia;
}
.mark-dot {
  position:absolute;
  width:35px;
  height:35px;
  left:133px;
  top:22px;
  border-radius:50%;
  background:#f0dbc1;
}
.mark-line {
  position:absolute;
  width:47px;
  height:47px;
  left:128px;
  top:73px;
  border-radius:11px;
  border:1px solid #bed4c9;
  background:#edf7f0;
  transform:rotate(12deg);
}
.hero-mark>span {
  position:absolute;
  bottom:0;
  left:10px;
  font-size:10px;
  color:#8390a2;
}
.target-strip {
  border:1px solid #dce5f2;
  border-radius:9px;
  background:#f0f5fc;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:15px 20px;
  margin-bottom:34px;
}
.target-strip>div {
  display:flex;
  align-items:center;
  gap:10px;
}
.target-strip strong {
  font-size:12px;
  font-weight:650;
}
.target-strip span:not(.connection-dot) {
  font-size:11px;
  color:var(--muted);
  margin-left:5px;
}
.connection-dot {
  height:7px;
  width:7px;
  display:inline-block;
  border-radius:50%;
  background:#4c8b6b;
}
.target-strip select {
  font-size:11px;
  background:#fff;
  border:1px solid #d6dfed;
  border-radius:6px;
  padding:8px 30px 8px 12px;
  max-width:270px;
  color:var(--ink);
}
h2 {
  font-size:19px;
  font-weight:650;
  letter-spacing:-.4px;
  margin:0;
}
.section-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.section-toolbar p {
  font-size:11px;
  color:var(--muted);
  margin:5px 0 0;
}
#product-count {
  font-size:10px;
  padding:2px 7px;
  border-radius:12px;
  background:#e9edf3;
  margin-left:8px;
  vertical-align:middle;
  color:var(--muted);
}
.search {
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  background:white;
  border-radius:7px;
  padding:7px 12px;
  color:var(--muted);
}
.search span {
  font-size:19px;
  line-height:1;
}
.search input {
  border:0;
  outline:0;
  font-size:11px;
  width:160px;
}
.filters {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:22px 0;
}
.filters button {
  background:white;
  border:1px solid var(--line);
  border-radius:6px;
  color:#647186;
  padding:6px 13px;
  font-size:11px;
}
.filters button.selected {
  background:var(--ink);
  border-color:var(--ink);
  color:white;
}
.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.card {
  display:flex;
  flex-direction:column;
  background:white;
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px 21px;
  min-height:285px;
  transition:box-shadow .16s,transform .16s;
}
.card:hover {
  transform:translateY(-2px);
  box-shadow:0 7px 22px #12254509;
}
.card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:19px;
}
.product-icon {
  height:40px;
  width:40px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:21px;
  background:#eaf0fe;
  color:#4d74b4;
}
.card:nth-child(3n+2) .product-icon {
  background:#edf5ed;
  color:#658773;
}
.card:nth-child(3n) .product-icon {
  background:#f7f0e6;
  color:#a48b64;
}
.badge {
  font-size:9px;
  padding:3px 7px;
  background:#f3f5f8;
  color:#6d788a;
  border-radius:4px;
}
.badge.free {
  background:#edf7f0;
  color:var(--green);
}
.card .category {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1.1px;
  color:#8b96a4;
  margin-bottom:5px;
}
.card h3 {
  font-size:16px;
  letter-spacing:-.3px;
  margin:0 0 9px;
}
.card p {
  font-size:11px;
  color:var(--muted);
  line-height:1.8;
  margin:0 0 13px;
  min-height:57px;
}
.dependency {
  font-size:10px;
  color:#748095;
  min-height:18px;
  margin-bottom:18px;
}
.card-bottom {
  border-top:1px solid #edf0f4;
  padding-top:14px;
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:5px;
}
.card-bottom span {
  font-size:9px;
  color:#8d96a3;
}
.link-button {
  color:var(--blue);
  background:none;
  border:0;
  padding:0;
  font-size:11px;
  font-weight:650;
}
.footnote {
  display:flex;
  gap:16px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:9px;
  margin-top:27px;
  background:#fff;
}
.footnote>span {
  font-size:23px;
  color:#8f9db0;
}
.footnote p {
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  margin:0;
}
.footnote strong {
  display:block;
  color:#435269;
  font-weight:600;
}
footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  color:#929cac;
  border-top:1px solid var(--line);
  padding:24px 0;
  margin-top:44px;
  font-size:10px;
}
footer span:first-child {
  font-weight:750;
  color:#68778b;
}
.intro {
  max-width:650px;
  color:var(--muted);
  margin:15px 0 30px;
}
.list {
  display:grid;
  gap:12px;
}
.row,.panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:9px;
  padding:20px;
}
.row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}
.row h3 {
  font-size:14px;
  margin:0;
}
.row p {
  font-size:12px;
  color:var(--muted);
  margin:5px 0;
}
.row small {
  color:var(--muted);
}
.row-actions {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.primary {
  text-decoration:none;
  display:inline-block;
  background:var(--blue);
  border:1px solid var(--blue);
  border-radius:7px;
  color:#fff;
  font-size:12px;
  font-weight:600;
  padding:10px 17px;
}
.secondary {
  border:1px solid var(--line);
  background:white;
  border-radius:7px;
  padding:9px 14px;
  font-size:12px;
}
.panel {
  margin-top:24px;
}
.panel p {
  color:var(--muted);
  font-size:12px;
}
form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}
form label {
  font-size:11px;
  display:grid;
  gap:5px;
}
form input,form select {
  padding:10px;
  border:1px solid var(--line);
  border-radius:6px;
  width:100%;
  background:#fff;
}
form button {
  justify-self:start;
}
output {
  display:block;
  overflow-wrap:anywhere;
  background:#f1f5fb;
  border:1px solid var(--line);
  padding:16px;
  margin-top:20px;
  font-size:12px;
}
dialog {
  border:1px solid var(--line);
  border-radius:15px;
  max-width:520px;
  width:calc(100% - 32px);
  padding:34px;
  color:var(--ink);
  box-shadow:0 20px 100px #0f234333;
}
dialog::backdrop {
  background:#12223d55;
}
dialog h2 {
  font:normal 30px Georgia;
  margin:16px 0;
}
dialog p {
  font-size:13px;
  color:var(--muted);
}
dialog .notice {
  background:#fff6e4;
  border:1px solid #f0dfbb;
  padding:13px;
  border-radius:7px;
  color:#8b6a2e;
  font-size:11px;
  margin:20px 0;
}
.close {
  position:absolute;
  right:12px;
  top:7px;
  font-size:27px;
  color:var(--muted);
  background:none;
  border:0;
}
#message {
  padding:13px 17px;
  border:1px solid #c5dfcf;
  border-radius:8px;
  background:#edf8f1;
  font-size:12px;
  margin-bottom:24px;
}
#message.error {
  background:#fff0ee;
  border-color:#ecc9c4;
  color:#953a32;
}
.empty {
  color:var(--muted);
  font-size:13px;
  padding:30px 0;
}
@media(min-width:1550px) {
  main {
    padding-top:55px;
  }
  .hero h1 {
    font-size:56px;
  }
  .card {
    min-height:300px;
  }
}
@media(max-width:1150px) {
  .sidebar {
    width:215px;
    padding-inline:16px;
  }
  .shell {
    margin-left:215px;
  }
  main {
    padding:32px 28px 0;
  }
  .topbar {
    padding-inline:28px;
  }
  .grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .hero-mark {
    width:180px;
  }
  .target-strip>div>span:last-child {
    display:none;
  }
}
@media(max-width:760px) {
  .sidebar {
    position:static;
    width:auto;
    padding:18px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .brand {
    padding:0;
    font-size:25px;
  }
  .brand small,.workspace,.sidebar-note,.identity {
    display:none;
  }
  nav {
    display:flex;
    margin-top:15px;
    overflow:auto;
  }
  .nav {
    white-space:nowrap;
    width:auto;
    font-size:11px;
    gap:6px;
    padding:8px;
  }
  .nav>span {
    font-size:17px;
  }
  .shell {
    margin:0;
  }
  .topbar {
    height:55px;
    padding-inline:20px;
  }
  .breadcrumb {
    font-size:11px;
  }
  .breadcrumb span {
    margin:0 8px;
  }
  main {
    padding:28px 20px 0;
  }
  .hero-mark {
    display:none;
  }
  .hero h1,h1 {
    font-size:40px;
  }
  .hero p {
    font-size:12px;
  }
  .target-strip {
    display:block;
    padding:14px;
  }
  .target-strip select {
    width:100%;
    margin-top:10px;
    max-width:none;
  }
  .section-toolbar {
    display:block;
  }
  .search {
    margin-top:16px;
  }
  .search input {
    width:100%;
  }
  .grid {
    grid-template-columns:1fr;
  }
  .card {
    min-height:260px;
  }
  .filters {
    gap:6px;
  }
  .filters button {
    font-size:10px;
    padding:6px 9px;
  }
  .row {
    align-items:start;
    flex-direction:column;
  }
  form {
    grid-template-columns:1fr;
  }
  footer {
    flex-wrap:wrap;
  }
  .top-actions {
    gap:5px;
  }
  .dev-tag {
    display:none;
  }
  .desktop {
    display:none;
  }
}