@font-face {
  font-family: "Studio Helvetica";
  src: url("/ui-fonts/helvetica-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Studio Helvetica";
  src: url("/ui-fonts/helvetica-bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Studio Helvetica";
  src: url("/ui-fonts/helvetica-oblique.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Studio Helvetica";
  src: url("/ui-fonts/helvetica-boldoblique.woff") format("woff");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Studio Helvetica";
  src: url("/ui-fonts/helvetica-light.woff") format("woff");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Studio Helvetica";
  src: url("/ui-fonts/helvetica-lightoblique.woff") format("woff");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  background: var(--ui-background);
  color: var(--ui-ink);
  --ui-font: "Inter", sans-serif;
  --ui-text: 13px;
  --ui-heading: 24px;
  --ui-accent: #d1fe18;
  --ui-accent-text: #536600;
  --ui-accent-hover: #dcff4d;
  --ui-accent-base: #819e0d;
  --ui-accent-ink: #171b06;
  --ui-control-size: 40px;
  --ui-radius-control: 10px;
  --ui-radius-field: 10px;
  --ui-radius-panel: 14px;
  --ui-radius-menu: 12px;
  --ui-space-xs: 4px;
  --ui-space-sm: 8px;
  --ui-space-md: 12px;
  --ui-space-lg: 16px;
  --ui-space-xl: 24px;
  --ui-duration: .18s;
  font-family: var(--ui-font);
  font-synthesis: none;
  --ui-background: #ffffff;
  --ui-page: #ffffff;
  --ui-sidebar: #f9f9f9;
  --ui-soft: #ebebeb;
  --ui-hover: #e4e4e4;
  --ui-line: #dddddd;
  --ui-input-line: #c9c9c9;
  --ui-ink: #202020;
  --ui-muted: #676767;
  --ui-on-accent: #ffffff;
  --ui-focus: #777777;
  --ui-warning-bg: #fff4dc;
  --ui-warning-ink: #715218;
  --ui-error: #aa3e34;
  --ui-video-bg: #e7edf5;
  --ui-video-line: #a9b9cf;
  --ui-audio-bg: #e7efeb;
  --ui-audio-line: #a4bdb1;
  --ui-text-bg: #f2ecdf;
  --ui-text-line: #c6b696;
  --ui-overlay-bg: #eee8f3;
  --ui-overlay-line: #bbaacb;
  --ui-shadow: 0 12px 42px #00000014;
}
:root:not([data-theme="light"]) {
  --ui-accent-text: var(--ui-accent);
  --ui-background: #040609;
  --ui-page: #212121;
  --ui-sidebar: #181818;
  --ui-soft: #2f2f2f;
  --ui-hover: #3b3b3b;
  --ui-line: #3c3c3c;
  --ui-input-line: #565656;
  --ui-ink: #ececec;
  --ui-muted: #b2b2b2;
  --ui-on-accent: #202020;
  --ui-focus: #93bafa;
  --ui-warning-bg: #3b3222;
  --ui-warning-ink: #ecd29d;
  --ui-error: #f1a89f;
  --ui-video-bg: #303b49;
  --ui-video-line: #53667f;
  --ui-audio-bg: #2b3e36;
  --ui-audio-line: #527464;
  --ui-text-bg: #413b2e;
  --ui-text-line: #81714d;
  --ui-overlay-bg: #3c3245;
  --ui-overlay-line: #736083;
  --ui-shadow: 0 12px 42px #00000040;
}
:root[data-theme="light"] {
  color-scheme: light;
  --ui-accent: #242424;
  --ui-accent-text: #242424;
  --ui-accent-hover: #3a3a3a;
  --ui-accent-base: #242424;
  --ui-accent-ink: #ffffff;
  --ui-page: #f7f7f7;
  --ui-sidebar: #f0f0f0;
}
::selection {
  background: #b9d3ef;
  color: #17283a;
}
:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
}
input,
textarea {
  caret-color: var(--ui-ink);
}
input::placeholder,
textarea::placeholder {
  color: var(--ui-muted);
  opacity: 1;
}
.ui-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ui-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex-shrink: 0;
}
.theme-toggle {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  width: 38px;
  height: 38px;
  padding: 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ui-muted);
  cursor: pointer;
}
.theme-toggle:hover {
  background: var(--ui-hover);
  color: var(--ui-ink);
}
.sun-icon,
[data-theme="dark"] .moon-icon {
  display: none;
}
[data-theme="dark"] .sun-icon {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/* All controls, document views and time labels share the application family. */
body, button, input, textarea, select, option, pre, code, kbd, samp, svg text { font-family: var(--ui-font); }
.time, time { font-variant-numeric: tabular-nums; }

/* One account counter in the platform and the editor's storage panel. */
.account-capacity{padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid var(--ui-line);font:13px/1.55 var(--ui-font);color:var(--ui-ink)}
.account-capacity h2{font-size:15px;font-weight:700;margin:0 0 16px}
.account-capacity-total{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.account-capacity-total strong{font-size:24px;letter-spacing:-.4px}.account-capacity-total span{color:var(--ui-muted)}
.account-capacity progress{width:100%;height:6px;margin:15px 0 6px;accent-color:var(--ui-ink)}
.account-capacity p{margin:8px 0;color:var(--ui-muted)}.account-capacity summary{padding:12px 0;cursor:pointer}
.account-capacity-spaces>div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--ui-line)}
.account-capacity-spaces>div>:first-child{min-width:0;overflow-wrap:anywhere;color:inherit}.account-capacity-spaces>div>:last-child{text-align:right;flex-shrink:0}
.account-capacity-spaces small{display:block;color:var(--ui-muted);font-size:12px}
.account-capacity .account-capacity-policy{font-size:12px;margin-top:16px}.account-capacity .account-capacity-limit{color:var(--ui-error)}

.library-content h2.storage-project-heading{font-size:15px;font-weight:700;margin:0 0 16px}

:root[data-motion="reduced"] {scroll-behavior:auto}
:root[data-motion="reduced"] .brand-wordmark {animation:none!important}

@media (pointer: coarse) { :root { --ui-control-size: 44px; } }

/* Figma semantic roles. Both shells import these exact tokens. */
:root {
 --ui-control-text:14px;--ui-control-line:20px;
 --ui-field-surface:#040609;--ui-menu-surface:#040609;--ui-menu-selected:#2f2f2f;
 --ui-primary:#f1f1f1;--ui-primary-ink:#171719;--ui-primary-hover:#fff;
 --ui-public-background:var(--ui-background);--ui-public-surface:#171719;
 --ui-public-elevated:#252528;--ui-public-ink:#f5f5f5;--ui-public-muted:#a5a5ab;
 --ui-public-line:#343438;--ui-public-shadow:0 20px 70px #0006;
 --ui-public-highlight:var(--ui-accent);--ui-public-glow:rgb(209 254 24 / .18);
 --ui-public-media-highlight:#d1fe18;
 --ui-icon-stroke:1.65;

  --glass-fill:linear-gradient(145deg,rgb(255 255 255 / .045),rgb(255 255 255 / .008) 42%,rgb(255 255 255 / .018)),rgb(24 24 24 / .22);
  --glass-edge:rgb(255 255 255 / .055);
  --glass-shadow:0 12px 32px rgb(0 0 0 / .16);
  --glass-field:rgb(0 0 0 / .10);
  --glass-field-edge:rgb(255 255 255 / .13);
  --glass-control:rgb(255 255 255 / .045);
  --glass-hover:rgb(255 255 255 / .09);
  --glass-selected:rgb(255 255 255 / .15);
  --glass-selected-hover:rgb(255 255 255 / .19);
  --glass-muted:#bdbdbd;
  --glass-ink:#f0f0f0;
  --glass-divider:rgb(255 255 255 / .10);
  --glass-focus:rgb(255 255 255 / .42);
  --glass-disabled:rgb(255 255 255 / .035);
  --glass-disabled-ink:#777;
  --glass-menu:var(--ui-menu-surface);
  --glass-solid:#222;
  --glass-panel-blur:1px;
  --glass-chrome-blur:10px;

}
:root[data-theme="light"] {
 --ui-background:#ededed;--ui-field-surface:#fff;--ui-menu-surface:#fff;--ui-menu-selected:#ebebeb;--ui-ink:#242424;--ui-muted:#666;
 --ui-primary:#202023;--ui-primary-ink:#fff;--ui-primary-hover:#353538;
 --ui-public-background:#f5f5f5;--ui-public-surface:#fff;--ui-public-elevated:#e9e9eb;
 --ui-public-ink:#19191c;--ui-public-muted:#65656c;--ui-public-line:#d6d6da;
 --ui-public-shadow:0 20px 70px #0002;
 --ui-public-highlight:#242428;--ui-public-glow:rgb(25 29 38 / .045);

  
  --glass-fill:rgb(255 255 255 / .48);
  --glass-edge:rgb(0 0 0 / .045);
  --glass-shadow:0 12px 32px rgb(0 0 0 / .045);
  --glass-field:rgb(255 255 255 / .22);
  --glass-field-edge:rgb(0 0 0 / .13);
  --glass-control:rgb(255 255 255 / .38);
  --glass-hover:rgb(255 255 255 / .66);
  --glass-selected:rgb(255 255 255 / .88);
  --glass-selected-hover:rgb(255 255 255 / .96);
  --glass-muted:#5e5e5e;
  --glass-ink:#242424;
  --glass-divider:rgb(0 0 0 / .09);
  --glass-focus:rgb(0 0 0 / .40);
  --glass-disabled:rgb(0 0 0 / .035);
  --glass-disabled-ink:#959595;
  --glass-menu:var(--ui-menu-surface);
  --glass-solid:#f7f7f7;

}
@media(max-width:900px),(pointer:coarse){:root{--ui-control-size:44px}}