.os6 {
  --os6-bg:#f7f7f7;
  --os6-panel:#fff;
  --os6-soft:#f1f1f1;
  --os6-line:#e9e9e7;
  --os6-ink:#181818;
  --os6-muted:#858585;
  display:grid;
  grid-template-columns:276px minmax(0,1fr);
  min-height:calc(100vh - 69px);
  padding:12px;
  gap:28px;
  color:var(--os6-ink);
  background:var(--os6-bg);
  font-family:"Gordita Regular",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  letter-spacing:-.025em;
}
.os6 *, .os6 *::before, .os6 *::after { box-sizing:border-box; }
.os6 a { color:inherit; text-decoration:none; }
.os6 button { color:inherit; font:inherit; }
.os6 button:focus-visible, .os6 a:focus-visible { outline:3px solid #7566ff; outline-offset:3px; }
.os6-sidebar { position:sticky; top:12px; height:calc(100vh - 24px); min-height:690px; display:flex; flex-direction:column; padding:21px 15px 15px; border-radius:20px; background:var(--os6-panel); }
.os6-sidebar-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 8px 27px; border-bottom:1px solid var(--os6-line); }
.os6-brand { display:flex; align-items:center; gap:10px; font-size:18px; }
.os6-logo { display:inline-block; width:30px; height:30px; border:3px solid currentColor; border-radius:50%; flex:0 0 auto; }
.os6-sidebar-tools { display:flex; gap:2px; }
.os6-icon-button { display:inline-grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:11px; background:transparent; color:var(--os6-muted); }
.os6-icon-button:hover { color:var(--os6-ink); background:var(--os6-soft); }
.os6-sidebar nav { overflow:auto; padding:8px 0; scrollbar-width:thin; }
.os6-sidebar nav>p, .os6-sidebar-footer>p { margin:14px 10px 7px; color:#a2a2a2; font-size:10px; text-transform:uppercase; letter-spacing:.13em; }
.os6-sidebar nav>a, .os6-sidebar nav>button { display:flex; align-items:center; width:100%; gap:13px; margin:2px 0; padding:10px 12px; border:0; border-radius:13px; background:transparent; color:#6f6f6f; text-align:left; }
.os6-sidebar nav>a:hover, .os6-sidebar nav>button:not(:disabled):hover, .os6-sidebar nav>.active { color:var(--os6-ink); background:var(--os6-soft); }
.os6-sidebar nav i { width:22px; font-size:19px; text-align:center; }
.os6-sidebar nav small { margin-left:auto; color:#999; font-size:12px; }
.os6-sidebar nav small.warning { color:#b57610; }
.os6-sidebar nav .disabled { color:#c8c8c8; }
.os6-sidebar-footer { margin-top:auto; border-top:1px solid var(--os6-line); }
.os6-new-project { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; margin-top:-54px; padding:13px; border:0; border-radius:14px; color:#fff!important; background:linear-gradient(105deg,#8e5be8,#31323a 52%,#3984e9); font-weight:600!important; }
.os6-account { display:grid; grid-template-columns:38px minmax(0,1fr) 16px; align-items:center; gap:10px; width:100%; padding:7px 8px; border:0; background:transparent; text-align:left; }
.os6-avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--os6-soft); }
.os6-account strong, .os6-account small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.os6-account strong { font-size:12px; }.os6-account small { color:var(--os6-muted); font-size:10px; }
.os6-main { min-width:0; padding:10px 12px 16px 0; }
.os6-page-header { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:86px; }
.os6-page-header p { margin:0 0 8px; color:var(--os6-muted); }.os6-page-header p span { padding:0 8px; }.os6-page-header p a:hover { color:var(--os6-ink); }
.os6-page-header h1 { margin:0; font-size:27px; font-weight:600; letter-spacing:-.055em; }
.os6-header-actions { display:flex; align-items:center; gap:12px; }
.os6-environment { display:flex; align-items:center; gap:9px; padding:11px 17px; border:0; border-radius:18px; background:var(--os6-panel); }.os6-environment span { color:var(--os6-muted); }
.os6-workspace { display:grid; grid-template-columns:minmax(650px,1fr) 340px; gap:24px; }
.os6-map-card, .os6-project-card, .os6-project-nav { border-radius:20px; background:var(--os6-panel); }
.os6-map-card { min-width:0; overflow:hidden; }
.os6-map-card>header { display:flex; align-items:center; justify-content:space-between; gap:20px; height:78px; padding:0 23px; }
.os6-map-card>header p { margin:0; color:var(--os6-muted); }.os6-map-card>header p span { color:#b6b6b6; }
.os6-map-card>header>div { display:flex; align-items:center; gap:8px; }
.os6-add { display:flex; align-items:center; gap:10px; padding:10px 18px; border:0; border-radius:22px; color:#fff!important; background:#171717; }.os6-add i { font-size:19px; }
.os6-expand { display:flex; align-items:center; gap:9px; padding:9px 10px; border:0; background:transparent; color:var(--os6-muted)!important; }.os6-expand:hover { color:var(--os6-ink)!important; }
.os6-canvas { position:relative; min-height:625px; overflow:hidden; background-color:#fefefe; background-image:radial-gradient(#e6e6e4 .7px,transparent .7px); background-size:17px 17px; transform-origin:center; }
.os6-connections { position:absolute; inset:0; width:100%; height:100%; }.os6-connections path { fill:none; stroke:#a7a7a4; stroke-width:1.2; vector-effect:non-scaling-stroke; }.os6-connections path::before { content:""; }
.os6-service { --card:#e9f2ec; position:absolute; left:var(--x); top:var(--y); width:215px; padding:0; overflow:hidden; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.85); border-radius:14px; background:var(--card); text-align:left; box-shadow:0 2px 8px rgba(26,35,28,.025); }
.os6-service::before, .os6-service::after { content:""; position:absolute; top:50%; width:6px; height:6px; border-radius:50%; background:#7d7d7a; transform:translateY(-50%); }.os6-service::before { left:-3px; }.os6-service::after { right:-3px; }
.os6-service:hover, .os6-service.is-selected { box-shadow:0 0 0 3px rgba(30,30,30,.12); }
.os6-service-title { display:flex; align-items:center; gap:10px; padding:15px 14px 10px; }.os6-service-title>i { display:grid; place-items:center; width:31px; height:31px; flex:0 0 auto; border-radius:11px; background:rgba(112,174,134,.12); color:#5d876b; }
.os6-service-title strong, .os6-service-title small { display:block; }.os6-service-title strong { font-size:12px; }.os6-service-title small { margin-top:2px; color:var(--os6-muted); font-size:10px; }
.os6-service-meta { display:flex; align-items:center; justify-content:space-between; padding:9px 14px; background:rgba(255,255,255,.24); color:var(--os6-muted); font-size:10px; }.os6-service-meta small { color:#52926b; }.os6-service-meta i { margin-left:6px; }
.os6-service.edge { --card:#fbf0e5; }.os6-service.edge .os6-service-title>i { color:#c0822d; background:#fff1dc; }
.os6-service.database.postgres { --card:#e7ecfb; }.os6-service.database.postgres .os6-service-title>i { color:#5071bd; background:#dce5fb; }
.os6-service.database.redis { --card:#fae8e6; }.os6-service.database.redis .os6-service-title>i { color:#dc4e4a; background:#f9d9d7; }
.os6-zoom { position:absolute; left:22px; bottom:20px; display:flex; align-items:center; overflow:hidden; border-radius:11px; background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.04); }.os6-zoom button { width:43px; height:38px; border:0; background:#fff; }.os6-zoom button:hover { background:var(--os6-soft); }.os6-zoom output { width:52px; color:var(--os6-muted); text-align:center; }
.os6-drag-hint { position:absolute; right:24px; bottom:24px; margin:0; color:var(--os6-muted); }
.os6-project-column { display:grid; align-content:start; gap:20px; }
.os6-project-card { padding:27px; }.os6-project-card header { display:flex; align-items:center; justify-content:space-between; }.os6-project-card header p { margin:0; color:#999; font-size:10px; text-transform:uppercase; letter-spacing:.13em; }.os6-project-card header span { padding:6px 12px; border-radius:16px; color:#4f9366; background:#edf7ef; font-size:11px; }
.os6-project-card h2 { margin:12px 0 25px; font-size:18px; }.os6-project-card h2 i { color:var(--os6-muted); font-size:14px; }.os6-project-card>div { display:flex; align-items:center; gap:12px; color:var(--os6-muted); }.os6-project-card>div button { margin-left:auto; padding:10px 13px; border:1px solid var(--os6-line); border-radius:13px; background:#fff; color:var(--os6-ink); }
.os6-project-nav { display:grid; gap:3px; padding:20px 17px; }.os6-project-nav button { display:flex; align-items:center; gap:14px; width:100%; padding:12px 14px; border:0; border-radius:13px; background:transparent; color:#777; text-align:left; }.os6-project-nav button i { width:21px; font-size:18px; text-align:center; }.os6-project-nav button:hover, .os6-project-nav button.active { color:var(--os6-ink); background:var(--os6-soft); }
.os6-mobile-bar { display:none; }
.os6.is-collapsed { grid-template-columns:78px minmax(0,1fr); }.os6.is-collapsed .os6-sidebar { padding-inline:10px; }.os6.is-collapsed .os6-brand strong, .os6.is-collapsed .os6-sidebar nav span, .os6.is-collapsed .os6-sidebar nav small, .os6.is-collapsed .os6-sidebar nav>p, .os6.is-collapsed .os6-sidebar-footer>p, .os6.is-collapsed .os6-account>span:nth-child(2), .os6.is-collapsed .os6-account>i, .os6.is-collapsed .os6-new-project span, .os6.is-collapsed .os6-sidebar-tools>.os6-icon-button:first-child { display:none; }.os6.is-collapsed .os6-sidebar-heading, .os6.is-collapsed .os6-sidebar nav>a, .os6.is-collapsed .os6-sidebar nav>button { justify-content:center; }.os6.is-collapsed .os6-new-project { width:46px; margin-inline:auto; }.os6.is-collapsed .os6-account { display:flex; justify-content:center; }
.os6.is-expanded .os6-map-card { position:fixed; inset:12px; z-index:1050; box-shadow:0 30px 80px rgba(0,0,0,.2); }.os6.is-expanded .os6-map-card .os6-canvas { height:calc(100vh - 102px); }
@media (max-width:1399.98px) { .os6-workspace { grid-template-columns:minmax(580px,1fr) 290px; }.os6-service { width:190px; }.os6-project-card,.os6-project-nav { border-radius:17px; } }
@media (max-width:1199.98px) { .os6-workspace { grid-template-columns:1fr; }.os6-project-column { grid-template-columns:1fr 1.2fr; }.os6-project-nav { grid-template-columns:1fr 1fr; }.os6-project-nav button { padding:10px 12px; } }
@media (max-width:991.98px) { .os6 { display:block; padding:10px; }.os6-sidebar { position:fixed; inset:72px auto 10px 10px; z-index:1040; width:min(290px,calc(100vw - 20px)); height:auto; min-height:0; box-shadow:0 18px 50px rgba(0,0,0,.16); transform:translateX(calc(-100% - 20px)); transition:transform .2s ease; }.os6.menu-open .os6-sidebar { transform:none; }.os6-mobile-bar { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:5px 10px; }.os6-main { padding:0; }.os6-page-header { padding-inline:8px; }.os6-workspace { grid-template-columns:1fr; } }
@media (max-width:767.98px) { .os6-page-header { align-items:flex-end; }.os6-page-header p { display:none; }.os6-header-actions .os6-environment span,.os6-header-actions .os6-environment>.bi-bezier2 { display:none; }.os6-workspace { gap:12px; }.os6-map-card>header { height:auto; min-height:72px; padding:14px; }.os6-map-card>header>div { gap:2px; }.os6-map-card>header .os6-expand span { display:none; }.os6-canvas { display:grid; gap:10px; min-height:0; padding:14px; }.os6-connections { display:none; }.os6-service { position:relative; left:auto!important; top:auto!important; width:100%; transform:none; }.os6-zoom,.os6-drag-hint { display:none; }.os6-project-column { grid-template-columns:1fr; }.os6-project-nav { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .os6 * { scroll-behavior:auto!important; transition:none!important; } }