WorkRoot-WRNexusJSComponent/app/pages/preview/workspace.wrn

// Composed reference using the shipped UI components.
page DesignSystem {
  state saved = false
  seo {
    title = "Workspace example"
  }
  view {
<nav class="example-toolbar"><a href="/preview">← All examples</a><a href="#example-source">View code</a></nav>
    <div class="workspace-preview">
      <header class="workspace-topbar">
        <a class="workspace-brand" href="/preview/workspace"><span class="workspace-mark">W</span>WRNexus<span class="workspace-preview-label">Example</span></a>
        <nav aria-label="Preview tools"><a href="/components/button">Components</a><button type="button" data-design-mode="light" data-wrn-theme-set="light" aria-label="Light theme"><span class="icon-[lucide--sun]" aria-hidden="true"></span></button><button type="button" data-design-mode="dark" data-wrn-theme-set="dark" aria-label="Dark theme"><span class="icon-[lucide--moon]" aria-hidden="true"></span></button><span class="workspace-avatar" aria-label="Sample user">JD</span></nav>
      </header>
        <div class="workspace-shell">
          <aside class="workspace-sidebar">
            <div class="workspace-organization"><span class="workspace-avatar">S</span><div><strong>Studio workspace</strong><small>Personal account</small></div></div>
            <nav aria-label="Workspace preview"><span class="workspace-nav-label">WORKSPACE</span><a href="/preview/workspace" aria-current="page"><span class="icon-[lucide--layout-dashboard]" aria-hidden="true"></span>Overview</a><a href="/preview/profile" aria-current="false"><span class="icon-[lucide--user-round]" aria-hidden="true"></span>Profile &amp; preferences</a><a href="/preview/sign-in"><span class="icon-[lucide--log-in]" aria-hidden="true"></span>Sign in preview</a></nav>
            <a class="workspace-library-link" href="/">Browse component library <span aria-hidden="true">↗</span></a>
          </aside>
          <main class="workspace-main">

              <PageHeader title="Your workspace" description="Everything you need to keep moving, in one place." variant="minimal" borderBottom="false" maxWidth="full" />
              <section class="workspace-welcome"><span class="workspace-avatar workspace-avatar--large">JD</span><div><h2>Good morning, Jamie</h2><p>Here’s what’s happening with your account.</p></div><Button label="Edit profile" href="/preview/profile" variant="secondary" size="sm" /></section>
              <section class="workspace-metrics" aria-label="Account summary"><MetricCard label="Workspaces" value="3" description="One place for every project" hover="none" /><MetricCard label="Team members" value="12" description="Working better, together" hover="none" /><MetricCard label="Connected services" value="4" description="All services operational" hover="none" /><MetricCard label="Account security" value="Protected" description="Two-step verification enabled" hover="none" class="workspace-security-metric" /></section>
              <div class="workspace-overview-grid">
                <section class="workspace-section"><header><div><h2>Make yourself at home</h2><p>A few small steps to get your workspace ready.</p></div><span class="workspace-status">2 of 3 complete</span></header><div class="workspace-steps"><div><span class="workspace-step-icon workspace-step-icon--done">✓</span><div><strong>Complete your profile</strong><p>Your team knows who you are.</p></div><span class="workspace-muted">Done</span></div><div><span class="workspace-step-icon workspace-step-icon--done">✓</span><div><strong>Secure your account</strong><p>An extra layer of protection is enabled.</p></div><span class="workspace-muted">Done</span></div><div><span class="workspace-step-icon">3</span><div><strong>Invite your team</strong><p>Bring the right people into your workspace.</p></div><Modal triggerLabel="Invite member" title="Invite a teammate" description="A shared workspace starts with your team." confirmLabel="Done" closeOnConfirm="true"><div class="workspace-fields"><Input id="invite-email" name="inviteEmail" type="email" label="Email address" placeholder="teammate@company.com" /><p class="workspace-muted">This is a design preview. No invitation will be sent.</p></div></Modal></div></div></section>
                <section class="workspace-section"><header><div><h2>Account status</h2><p>A little peace of mind.</p></div><span class="icon-[lucide--shield-check] workspace-status-icon" aria-hidden="true"></span></header><dl class="workspace-status-list"><div><dt>Email address</dt><dd>Verified</dd></div><div><dt>Two-step verification</dt><dd>Enabled</dd></div><div><dt>Recovery method</dt><dd>Added</dd></div></dl><a class="workspace-text-link" href="/preview/profile">Manage your preferences <span aria-hidden="true">→</span></a></section>
              </div>
              <section class="workspace-services"><header><h2>Your services</h2><p>Simple tools for the work that matters.</p></header><div class="workspace-service-grid"><Card title="Business email" description="A professional inbox for every conversation." icon="icon-[lucide--mail]" actionLabel="Explore forms" actionHref="/forms" /><Card title="Team workspace" description="Keep your people and projects connected." icon="icon-[lucide--users]" actionLabel="Explore tables" actionHref="/components/data-table" /><Card title="Scheduling" description="Make room for your next great idea." icon="icon-[lucide--calendar-days]" actionLabel="Explore calendar" actionHref="/components/date-picker" /></div></section>
            <footer class="workspace-footer"><span>© 2026 WRNexus</span><span>Sample workspace · Light &amp; dark preview</span></footer>
          </main>
        </div>

    </div>
<section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">// Composed reference using the shipped UI components.
page DesignSystem <span>&#123;</span>
  state saved = false
  seo <span>&#123;</span>
    title = "Workspace example"
  <span>&#125;</span>
  view <span>&#123;</span>
    &lt;div class="workspace-preview"&gt;
      &lt;header class="workspace-topbar"&gt;
        &lt;a class="workspace-brand" href="/preview/workspace"&gt;&lt;span class="workspace-mark"&gt;W&lt;/span&gt;WRNexus&lt;span class="workspace-preview-label"&gt;Example&lt;/span&gt;&lt;/a&gt;
        &lt;nav aria-label="Preview tools"&gt;&lt;a href="/components/button"&gt;Components&lt;/a&gt;&lt;button type="button" data-design-mode="light" data-wrn-theme-set="light" aria-label="Light theme"&gt;&lt;span class="icon-[lucide--sun]" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;button type="button" data-design-mode="dark" data-wrn-theme-set="dark" aria-label="Dark theme"&gt;&lt;span class="icon-[lucide--moon]" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;span class="workspace-avatar" aria-label="Sample user"&gt;JD&lt;/span&gt;&lt;/nav&gt;
      &lt;/header&gt;
        &lt;div class="workspace-shell"&gt;
          &lt;aside class="workspace-sidebar"&gt;
            &lt;div class="workspace-organization"&gt;&lt;span class="workspace-avatar"&gt;S&lt;/span&gt;&lt;div&gt;&lt;strong&gt;Studio workspace&lt;/strong&gt;&lt;small&gt;Personal account&lt;/small&gt;&lt;/div&gt;&lt;/div&gt;
            &lt;nav aria-label="Workspace preview"&gt;&lt;span class="workspace-nav-label"&gt;WORKSPACE&lt;/span&gt;&lt;a href="/preview/workspace" aria-current="page"&gt;&lt;span class="icon-[lucide--layout-dashboard]" aria-hidden="true"&gt;&lt;/span&gt;Overview&lt;/a&gt;&lt;a href="/preview/profile" aria-current="false"&gt;&lt;span class="icon-[lucide--user-round]" aria-hidden="true"&gt;&lt;/span&gt;Profile &amp;amp; preferences&lt;/a&gt;&lt;a href="/preview/sign-in"&gt;&lt;span class="icon-[lucide--log-in]" aria-hidden="true"&gt;&lt;/span&gt;Sign in preview&lt;/a&gt;&lt;/nav&gt;
            &lt;a class="workspace-library-link" href="/"&gt;Browse component library &lt;span aria-hidden="true"&gt;↗&lt;/span&gt;&lt;/a&gt;
          &lt;/aside&gt;
          &lt;main class="workspace-main"&gt;

              &lt;PageHeader title="Your workspace" description="Everything you need to keep moving, in one place." variant="minimal" borderBottom="false" maxWidth="full" /&gt;
              &lt;section class="workspace-welcome"&gt;&lt;span class="workspace-avatar workspace-avatar--large"&gt;JD&lt;/span&gt;&lt;div&gt;&lt;h2&gt;Good morning, Jamie&lt;/h2&gt;&lt;p&gt;Here’s what’s happening with your account.&lt;/p&gt;&lt;/div&gt;&lt;Button label="Edit profile" href="/preview/profile" variant="secondary" size="sm" /&gt;&lt;/section&gt;
              &lt;section class="workspace-metrics" aria-label="Account summary"&gt;&lt;MetricCard label="Workspaces" value="3" description="One place for every project" hover="none" /&gt;&lt;MetricCard label="Team members" value="12" description="Working better, together" hover="none" /&gt;&lt;MetricCard label="Connected services" value="4" description="All services operational" hover="none" /&gt;&lt;MetricCard label="Account security" value="Protected" description="Two-step verification enabled" hover="none" class="workspace-security-metric" /&gt;&lt;/section&gt;
              &lt;div class="workspace-overview-grid"&gt;
                &lt;section class="workspace-section"&gt;&lt;header&gt;&lt;div&gt;&lt;h2&gt;Make yourself at home&lt;/h2&gt;&lt;p&gt;A few small steps to get your workspace ready.&lt;/p&gt;&lt;/div&gt;&lt;span class="workspace-status"&gt;2 of 3 complete&lt;/span&gt;&lt;/header&gt;&lt;div class="workspace-steps"&gt;&lt;div&gt;&lt;span class="workspace-step-icon workspace-step-icon--done"&gt;✓&lt;/span&gt;&lt;div&gt;&lt;strong&gt;Complete your profile&lt;/strong&gt;&lt;p&gt;Your team knows who you are.&lt;/p&gt;&lt;/div&gt;&lt;span class="workspace-muted"&gt;Done&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span class="workspace-step-icon workspace-step-icon--done"&gt;✓&lt;/span&gt;&lt;div&gt;&lt;strong&gt;Secure your account&lt;/strong&gt;&lt;p&gt;An extra layer of protection is enabled.&lt;/p&gt;&lt;/div&gt;&lt;span class="workspace-muted"&gt;Done&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span class="workspace-step-icon"&gt;3&lt;/span&gt;&lt;div&gt;&lt;strong&gt;Invite your team&lt;/strong&gt;&lt;p&gt;Bring the right people into your workspace.&lt;/p&gt;&lt;/div&gt;&lt;Modal triggerLabel="Invite member" title="Invite a teammate" description="A shared workspace starts with your team." confirmLabel="Done" closeOnConfirm="true"&gt;&lt;div class="workspace-fields"&gt;&lt;Input id="invite-email" name="inviteEmail" type="email" label="Email address" placeholder="teammate@company.com" /&gt;&lt;p class="workspace-muted"&gt;This is a design preview. No invitation will be sent.&lt;/p&gt;&lt;/div&gt;&lt;/Modal&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
                &lt;section class="workspace-section"&gt;&lt;header&gt;&lt;div&gt;&lt;h2&gt;Account status&lt;/h2&gt;&lt;p&gt;A little peace of mind.&lt;/p&gt;&lt;/div&gt;&lt;span class="icon-[lucide--shield-check] workspace-status-icon" aria-hidden="true"&gt;&lt;/span&gt;&lt;/header&gt;&lt;dl class="workspace-status-list"&gt;&lt;div&gt;&lt;dt&gt;Email address&lt;/dt&gt;&lt;dd&gt;Verified&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Two-step verification&lt;/dt&gt;&lt;dd&gt;Enabled&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Recovery method&lt;/dt&gt;&lt;dd&gt;Added&lt;/dd&gt;&lt;/div&gt;&lt;/dl&gt;&lt;a class="workspace-text-link" href="/preview/profile"&gt;Manage your preferences &lt;span aria-hidden="true"&gt;→&lt;/span&gt;&lt;/a&gt;&lt;/section&gt;
              &lt;/div&gt;
              &lt;section class="workspace-services"&gt;&lt;header&gt;&lt;h2&gt;Your services&lt;/h2&gt;&lt;p&gt;Simple tools for the work that matters.&lt;/p&gt;&lt;/header&gt;&lt;div class="workspace-service-grid"&gt;&lt;Card title="Business email" description="A professional inbox for every conversation." icon="icon-[lucide--mail]" actionLabel="Explore forms" actionHref="/forms" /&gt;&lt;Card title="Team workspace" description="Keep your people and projects connected." icon="icon-[lucide--users]" actionLabel="Explore tables" actionHref="/components/data-table" /&gt;&lt;Card title="Scheduling" description="Make room for your next great idea." icon="icon-[lucide--calendar-days]" actionLabel="Explore calendar" actionHref="/components/date-picker" /&gt;&lt;/div&gt;&lt;/section&gt;
            &lt;footer class="workspace-footer"&gt;&lt;span&gt;© 2026 WRNexus&lt;/span&gt;&lt;span&gt;Sample workspace · Light &amp;amp; dark preview&lt;/span&gt;&lt;/footer&gt;
          &lt;/main&gt;
        &lt;/div&gt;

    &lt;/div&gt;
  <span>&#125;</span>
<span>&#125;</span>
</code></pre></section><details class="example-code-panel"><summary>Page styles · copy with the example</summary><button type="button" data-copy-target="#example-styles">Copy CSS</button><pre><code id="example-styles">/* Application composition reference. Component visuals remain in @wrnexus/ui. */
.workspace-preview <span>&#123;</span>
  min-height: 100dvh;
  color: var(--wrn-color-text);
  background: var(--wrn-color-bg);
  font: 0.875rem/1.5 var(--wrn-font-sans);
  -webkit-font-smoothing: antialiased;
<span>&#125;</span>
.workspace-preview a <span>&#123;</span>
  text-decoration: none;
<span>&#125;</span>
.workspace-preview h1,
.workspace-preview h2,
.workspace-preview p <span>&#123;</span>
  margin: 0;
<span>&#125;</span>
.workspace-topbar <span>&#123;</span>
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--wrn-color-border);
  background: var(--wrn-color-surface);
<span>&#125;</span>
.workspace-brand,
.workspace-topbar nav <span>&#123;</span>
  display: flex;
  align-items: center;
  gap: 1rem;
<span>&#125;</span>
.workspace-brand <span>&#123;</span>
  color: var(--wrn-color-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.025em;
<span>&#125;</span>
.workspace-mark <span>&#123;</span>
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--wrn-color-primary);
  color: var(--wrn-color-primary-contrast);
  font-size: 0.875rem;
<span>&#125;</span>
.workspace-preview-label <span>&#123;</span>
  padding-left: 1rem;
  border-left: 1px solid var(--wrn-color-border);
  color: var(--wrn-color-muted);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
<span>&#125;</span>
.workspace-topbar nav a <span>&#123;</span>
  color: var(--wrn-color-muted);
  font-size: 0.8125rem;
<span>&#125;</span>
.workspace-topbar button <span>&#123;</span>
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--wrn-color-border);
  border-radius: var(--wrn-radius-sm);
  color: var(--wrn-color-text);
  background: var(--wrn-color-surface);
  cursor: pointer;
<span>&#125;</span>
.workspace-topbar button span <span>&#123;</span>
  width: 18px;
  height: 18px;
<span>&#125;</span>
.workspace-avatar <span>&#123;</span>
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--wrn-color-primary-text);
  background: var(--wrn-color-primary-soft);
  font-size: 0.6875rem;
  font-weight: 600;
<span>&#125;</span>
.workspace-avatar--large <span>&#123;</span>
  width: 40px;
  height: 40px;
  font-size: 0.8125rem;
<span>&#125;</span>
.workspace-shell <span>&#123;</span>
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: calc(100dvh - 64px);
<span>&#125;</span>
.workspace-sidebar <span>&#123;</span>
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--wrn-color-border);
  background: var(--wrn-color-surface);
<span>&#125;</span>
.workspace-organization <span>&#123;</span>
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.5rem;
<span>&#125;</span>
.workspace-organization strong <span>&#123;</span>
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
<span>&#125;</span>
.workspace-organization small <span>&#123;</span>
  color: var(--wrn-color-muted);
  font-size: 0.6875rem;
<span>&#125;</span>
.workspace-sidebar nav <span>&#123;</span>
  display: grid;
  gap: 0.25rem;
<span>&#125;</span>
.workspace-nav-label <span>&#123;</span>
  margin: 0 0.5rem 0.5rem;
  color: var(--wrn-color-muted);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
<span>&#125;</span>
.workspace-sidebar nav a <span>&#123;</span>
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 38px;
  padding: 0.5rem 0.625rem;
  border-radius: var(--wrn-radius-sm);
  color: var(--wrn-color-muted);
  font-size: 0.8125rem;
<span>&#125;</span>
.workspace-sidebar nav a span <span>&#123;</span>
  width: 17px;
  height: 17px;
  flex: none;
<span>&#125;</span>
.workspace-sidebar nav a:hover <span>&#123;</span>
  background: var(--wrn-color-surface-soft);
  color: var(--wrn-color-text);
<span>&#125;</span>
.workspace-sidebar nav a[aria-current="page"] <span>&#123;</span>
  background: var(--wrn-color-primary-soft);
  color: var(--wrn-color-primary-text);
  font-weight: 600;
<span>&#125;</span>
.workspace-library-link <span>&#123;</span>
  margin-top: auto;
  padding: 1rem 0.5rem 0;
  border-top: 1px solid var(--wrn-color-border);
  color: var(--wrn-color-muted);
  font-size: 0.6875rem;
<span>&#125;</span>
.workspace-main <span>&#123;</span>
  width: 100%;
  max-width: 1400px;
  min-width: 0;
  margin: 0 auto;
  padding: 1.5rem 2rem 0;
<span>&#125;</span>
.workspace-main .wrn-page-header__inner <span>&#123;</span>
  padding: 0 0 1.5rem;
<span>&#125;</span>
.workspace-welcome <span>&#123;</span>
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-bottom: 1.5rem;
<span>&#125;</span>
.workspace-welcome h2 <span>&#123;</span>
  font-size: 0.9375rem;
  font-weight: 600;
<span>&#125;</span>
.workspace-welcome p <span>&#123;</span>
  color: var(--wrn-color-muted);
  font-size: 0.8125rem;
  margin-top: 0.125rem;
<span>&#125;</span>
.workspace-welcome &gt; :last-child <span>&#123;</span>
  margin-left: auto;
<span>&#125;</span>
.workspace-metrics <span>&#123;</span>
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
<span>&#125;</span>
.workspace-security-metric .wrn-metric-card__value <span>&#123;</span>
  font-size: 1.5rem;
<span>&#125;</span>
.workspace-overview-grid <span>&#123;</span>
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
  gap: 1.5rem;
<span>&#125;</span>
.workspace-section <span>&#123;</span>
  min-width: 0;
  padding: 1.25rem;
  background: var(--wrn-color-surface);
  border: 1px solid var(--wrn-color-border);
  border-radius: var(--wrn-radius-md);
<span>&#125;</span>
.workspace-section &gt; header <span>&#123;</span>
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
<span>&#125;</span>
.workspace-preview h2 <span>&#123;</span>
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
<span>&#125;</span>
.workspace-section header p,
.workspace-services header p <span>&#123;</span>
  margin-top: 0.25rem;
  color: var(--wrn-color-muted);
  font-size: 0.75rem;
<span>&#125;</span>
.workspace-status <span>&#123;</span>
  white-space: nowrap;
  border-radius: 4px;
  padding: 0.25rem 0.375rem;
  color: var(--wrn-color-muted);
  background: var(--wrn-color-surface-soft);
  font-size: 0.625rem;
<span>&#125;</span>
.workspace-steps &gt; div <span>&#123;</span>
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9375rem 0;
  border-bottom: 1px solid var(--wrn-color-border);
<span>&#125;</span>
.workspace-steps &gt; div:last-child <span>&#123;</span>
  border-bottom: 0;
  padding-bottom: 0;
<span>&#125;</span>
.workspace-steps strong <span>&#123;</span>
  font-size: 0.8125rem;
  font-weight: 500;
<span>&#125;</span>
.workspace-steps p <span>&#123;</span>
  font-size: 0.6875rem;
  color: var(--wrn-color-muted);
  margin-top: 0.125rem;
<span>&#125;</span>
.workspace-steps &gt; div &gt; :last-child <span>&#123;</span>
  margin-left: auto;
  flex-shrink: 0;
<span>&#125;</span>
.workspace-step-icon <span>&#123;</span>
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--wrn-color-border);
  border-radius: 50%;
  font-size: 0.6875rem;
<span>&#125;</span>
.workspace-step-icon--done <span>&#123;</span>
  border-color: transparent;
  color: var(--wrn-color-success-text);
  background: var(--wrn-color-success-soft);
<span>&#125;</span>
.workspace-muted <span>&#123;</span>
  font-size: 0.75rem;
  color: var(--wrn-color-muted);
<span>&#125;</span>
.workspace-status-icon <span>&#123;</span>
  width: 20px;
  height: 20px;
  color: var(--wrn-color-success-text);
<span>&#125;</span>
.workspace-status-list <span>&#123;</span>
  margin: 0 0 1rem;
<span>&#125;</span>
.workspace-status-list div <span>&#123;</span>
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--wrn-color-border);
  font-size: 0.75rem;
<span>&#125;</span>
.workspace-status-list dt <span>&#123;</span>
  color: var(--wrn-color-muted);
<span>&#125;</span>
.workspace-status-list dd <span>&#123;</span>
  margin: 0;
  color: var(--wrn-color-success-text);
<span>&#125;</span>
.workspace-text-link <span>&#123;</span>
  color: var(--wrn-color-primary-text);
  font-size: 0.75rem;
  font-weight: 500;
<span>&#125;</span>
.workspace-services <span>&#123;</span>
  margin-top: 1.75rem;
<span>&#125;</span>
.workspace-services &gt; header <span>&#123;</span>
  margin-bottom: 0.875rem;
<span>&#125;</span>
.workspace-service-grid <span>&#123;</span>
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
<span>&#125;</span>
.workspace-service-grid .wrn-next__card-body h3 <span>&#123;</span>
  font-size: 0.875rem;
  font-weight: 600;
<span>&#125;</span>
.workspace-service-grid .wrn-next__card-body p,
.workspace-service-grid .wrn-next__card-action <span>&#123;</span>
  font-size: 0.75rem;
<span>&#125;</span>
.workspace-footer <span>&#123;</span>
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.5rem 0;
  margin-top: 1.5rem;
  border-top: 1px solid var(--wrn-color-border);
  color: var(--wrn-color-muted);
  font-size: 0.6875rem;
<span>&#125;</span>
.workspace-settings <span>&#123;</span>
  max-width: 960px;
<span>&#125;</span>
.workspace-settings-section <span>&#123;</span>
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr);
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--wrn-color-border);
<span>&#125;</span>
.workspace-settings-section &gt; div &gt; p <span>&#123;</span>
  margin-top: 0.375rem;
  color: var(--wrn-color-muted);
  font-size: 0.8125rem;
<span>&#125;</span>
.workspace-fields <span>&#123;</span>
  min-width: 0;
  display: grid;
  gap: 1.25rem;
<span>&#125;</span>
.workspace-field-row <span>&#123;</span>
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
<span>&#125;</span>
.workspace-settings-actions <span>&#123;</span>
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
<span>&#125;</span>
.workspace-settings-actions &gt; span <span>&#123;</span>
  color: var(--wrn-color-muted);
  font-size: 0.75rem;
<span>&#125;</span>
.workspace-login <span>&#123;</span>
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 30%);
  min-height: calc(100dvh - 64px);
  background: var(--wrn-color-surface);
<span>&#125;</span>
.workspace-login-form <span>&#123;</span>
  width: min(360px, calc(100% - 3rem));
  align-self: center;
  justify-self: center;
  padding: 3rem 0;
<span>&#125;</span>
.workspace-login-form h1 <span>&#123;</span>
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  margin-top: 0.75rem;
<span>&#125;</span>
.workspace-login-form &gt; p <span>&#123;</span>
  margin-top: 0.5rem;
  color: var(--wrn-color-muted);
  font-size: 0.8125rem;
<span>&#125;</span>
.workspace-login-form form <span>&#123;</span>
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0 1.5rem;
<span>&#125;</span>
.workspace-login-form &gt; a <span>&#123;</span>
  color: var(--wrn-color-primary-text);
  font-size: 0.75rem;
<span>&#125;</span>
.workspace-kicker <span>&#123;</span>
  color: var(--wrn-color-muted);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
<span>&#125;</span>
.workspace-login-aside <span>&#123;</span>
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 4rem);
  color: #f0f1f4;
  background: #181a20;
<span>&#125;</span>
.workspace-login-aside .workspace-kicker <span>&#123;</span>
  color: #b5bac5;
<span>&#125;</span>
.workspace-login-aside h2 <span>&#123;</span>
  position: relative;
  z-index: 1;
  margin-top: 3rem;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.04em;
<span>&#125;</span>
.workspace-login-aside p <span>&#123;</span>
  position: relative;
  z-index: 1;
  margin-top: 1.25rem;
  color: #b5bac5;
  font-size: 0.875rem;
  line-height: 1.7;
<span>&#125;</span>
.workspace-login-aside small <span>&#123;</span>
  margin-top: auto;
  padding-top: 3rem;
  color: #b5bac5;
  font-size: 0.75rem;
<span>&#125;</span>
.workspace-login-lines <span>&#123;</span>
  position: absolute;
  width: 550px;
  height: 550px;
  border: 1px solid #ffffff12;
  border-radius: 50%;
  top: 35%;
  left: 15%;
  box-shadow:
    0 0 0 40px #ffffff04,
    0 0 0 80px #ffffff04,
    0 0 0 120px #ffffff04;
<span>&#125;</span>
.workspace-feedback <span>&#123;</span>
  color: var(--wrn-color-success-text);
<span>&#125;</span>
@media (max-width: 1180px) <span>&#123;</span>
  .workspace-metrics <span>&#123;</span>
    grid-template-columns: repeat(2, minmax(0, 1fr));
  <span>&#125;</span>
  .workspace-overview-grid <span>&#123;</span>
    grid-template-columns: minmax(0, 1fr);
  <span>&#125;</span>
<span>&#125;</span>
@media (max-width: 800px) <span>&#123;</span>
  .workspace-shell <span>&#123;</span>
    grid-template-columns: minmax(0, 1fr);
  <span>&#125;</span>
  .workspace-sidebar <span>&#123;</span>
    border-right: 0;
    border-bottom: 1px solid var(--wrn-color-border);
    padding: 0.625rem 1rem;
  <span>&#125;</span>
  .workspace-sidebar nav <span>&#123;</span>
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  <span>&#125;</span>
  .workspace-sidebar nav a <span>&#123;</span>
    white-space: nowrap;
  <span>&#125;</span>
  .workspace-nav-label,
  .workspace-organization,
  .workspace-library-link <span>&#123;</span>
    display: none;
  <span>&#125;</span>
  .workspace-main <span>&#123;</span>
    padding: 1.5rem 1rem 0;
  <span>&#125;</span>
  .workspace-login <span>&#123;</span>
    grid-template-columns: minmax(0, 1fr);
  <span>&#125;</span>
  .workspace-login-aside <span>&#123;</span>
    display: none;
  <span>&#125;</span>
  .workspace-service-grid <span>&#123;</span>
    grid-template-columns: minmax(0, 1fr);
  <span>&#125;</span>
<span>&#125;</span>
@media (max-width: 540px) <span>&#123;</span>
  .workspace-topbar <span>&#123;</span>
    padding-inline: 1rem;
  <span>&#125;</span>
  .workspace-preview-label,
  .workspace-topbar nav &gt; a <span>&#123;</span>
    display: none;
  <span>&#125;</span>
  .workspace-topbar nav <span>&#123;</span>
    gap: 0.625rem;
  <span>&#125;</span>
  .workspace-welcome <span>&#123;</span>
    flex-wrap: wrap;
  <span>&#125;</span>
  .workspace-section &gt; header <span>&#123;</span>
    flex-wrap: wrap;
  <span>&#125;</span>
  .workspace-steps &gt; div <span>&#123;</span>
    flex-wrap: wrap;
  <span>&#125;</span>
  .workspace-steps &gt; div &gt; :nth-child(2) <span>&#123;</span>
    flex: 1;
    min-width: 160px;
  <span>&#125;</span>
  .workspace-metrics <span>&#123;</span>
    gap: 0.625rem;
  <span>&#125;</span>
  .workspace-metrics .wrn-metric-card <span>&#123;</span>
    padding: 0.875rem;
  <span>&#125;</span>
  .workspace-security-metric .wrn-metric-card__value <span>&#123;</span>
    font-size: 1.25rem;
  <span>&#125;</span>
  .workspace-settings-section <span>&#123;</span>
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  <span>&#125;</span>
  .workspace-field-row <span>&#123;</span>
    grid-template-columns: minmax(0, 1fr);
  <span>&#125;</span>
  .workspace-settings-actions <span>&#123;</span>
    align-items: flex-start;
    flex-direction: column-reverse;
  <span>&#125;</span>
<span>&#125;</span>
</code></pre></details>
  }
}