/* Zeetude / Grafite Editorial — 14.11.2026
   A calm, Notion-inspired rhythm with a distinctly Zeetude blue.
   Presentation website only; functional product demos retain their own semantics. */
:root {
  color-scheme: dark;
  --paper:#24262a; --white:#303238; --ink:#f4f5f7; --muted:#aeb3bf;
  --line:rgba(235,239,255,.105); --blue:#4878f7; --brand-blue:#2937ff;
  --zeetude-canvas:#24262a; --zeetude-raised:#2b2e33; --zeetude-card:#30333a;
  --zeetude-inset:#222429; --zeetude-border:rgba(239,241,250,.12);
  --zeetude-blue:#416ff1; --zeetude-blue-hover:#3461e5;
  --zeetude-quiet:#afb5c2; --zeetude-white:#f4f5f8;
  --zeetude-ease:cubic-bezier(.22,.7,.2,1);
}
html {background:var(--zeetude-canvas);scroll-padding-top:100px}
body.studio,body.studio.page-minis,body.studio.page-lesson,
body.studio.page-foco,body.studio.page-topo,body.studio.page-policies {
  background:var(--zeetude-canvas);color:var(--zeetude-white);
  font-family:var(--type-sans),system-ui,sans-serif;
  letter-spacing:-.018em;
}
body.studio::before {opacity:.025;filter:grayscale(1)}
body.studio :is(h1,h2,h3,h4) {
  color:var(--zeetude-white);letter-spacing:-.058em;
}
body.studio :is(h1,h2,h3,h4) em,
body.studio :is(.hero h1 em,.lab-intro h2 em,.section-heading h2 em,
  .closing h2 em,.questions-layout h2 em,.product-hero h1 em,
  .exp-hero h1 em,.exp-section h2 em,.founder-content blockquote) {
  color:#a8baff;
}
body.studio :is(.eyebrow,.section-label,.breadcrumb,.exp-kicker,.exp-index) {
  color:#aeb4c2;font-weight:650;letter-spacing:.095em;
}
body.studio :is(.hero-bottom>p,.lab-intro p,.lab-values p,.section-heading>p,
  .tile-copy>p,.founder-content p:not(.eyebrow),.faq-list p,
  .product-hero-heading>p,.policy-content p,.exp-lede,.exp-section-head>p,
  .exp-benefit p,.exp-footnote,.ft-side-note) {
  color:var(--zeetude-quiet);
}
body.studio :is(.small-link,.breadcrumb,.policy-back,.hero-foot>a) {color:#bfcaff}
body.studio :is(a,button,summary,input,textarea,select,[tabindex]):focus-visible {
  outline:2px solid #95aeff;outline-offset:3px;
}
body.studio ::selection {background:#4c72e9;color:white}

/* Navigation: matte, slim, accessible. */
body.studio .site-header,body.studio.page-foco .site-header,
body.studio.page-topo .site-header {
  top:10px;height:72px;margin-top:10px;border-radius:16px;
  background:rgba(43,46,51,.97);
  border:1px solid var(--zeetude-border);
  box-shadow:0 10px 28px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
body.studio .site-header::before {content:none}
body.studio .site-header.is-scrolled {
  height:66px;background:rgba(42,45,50,.985);
  border-color:rgba(239,241,250,.16);box-shadow:0 12px 28px rgba(0,0,0,.16);
}
body.studio .brand {filter:none;width:136px}
body.studio .desktop-nav {color:#b9bec9;gap:clamp(14px,2vw,30px);font-size:12px}
body.studio .desktop-nav a {border-radius:6px}
body.studio .desktop-nav a:hover,
body.studio .desktop-nav a[aria-current],
body.studio .desktop-nav a[aria-current="page"] {color:#f8f9ff}
body.studio .desktop-nav a::after {height:2px;width:14px;border-radius:2px;background:#658bff;bottom:2px;left:calc(50% - 7px)}
body.studio .header-contact {
  color:#e4e8f3;border:1px solid var(--zeetude-border);
  border-radius:11px;background:#353840;
  padding:10px 13px;gap:12px;line-height:1.4;
  transition:background .2s,border-color .2s;
}
body.studio .header-contact:hover {background:#3e424c;border-color:rgba(151,174,255,.45);color:#fff}
body.studio .mobile-menu:not([hidden]) {
  background:#30333a;border:1px solid var(--zeetude-border);
  border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.18);
}
body.studio .mobile-menu a {color:#e9ebf3}
body.studio .mobile-menu a[aria-current="page"] {color:#b8c9ff}

/* Blue is a functional accent, not a decorative flood. */
body.studio .button,body.studio .exp-primary,
body.studio .ft-page .exp-primary,
body.studio #invite-dialog .action-primary {
  border:1px solid #5c87fa;background:var(--zeetude-blue);
  color:white;border-radius:12px;min-height:47px;
  padding:12px 19px;font-size:12px;font-weight:700;
  box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background .22s var(--zeetude-ease),border-color .22s,
    transform .22s var(--zeetude-ease),box-shadow .22s;
}
body.studio .button::before,body.studio .exp-primary::before,
body.studio .exp-secondary::before {content:none}
body.studio .button:hover,body.studio .exp-primary:hover,
body.studio .ft-page .exp-primary:hover,
body.studio #invite-dialog .action-primary:hover {
  background:var(--zeetude-blue-hover);border-color:#7194ff;
  transform:translateY(-1px);box-shadow:0 5px 14px rgba(29,59,160,.16);
}
body.studio .exp-secondary,body.studio .ft-page .exp-secondary {
  border:1px solid var(--zeetude-border);
  border-radius:12px;background:#33363c;color:#e9ecf3;
  box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  min-height:47px;padding:12px 18px;
}
body.studio .exp-secondary:hover,body.studio .ft-page .exp-secondary:hover {
  background:#3c4048;border-color:rgba(190,202,245,.29);
  transform:translateY(-1px);box-shadow:none;
}
body.studio :is(.back-top,.carousel-arrows button,.menu-toggle,.marquee-toggle) {
  background:#34373e;color:#ecf0fa;border:1px solid var(--zeetude-border);
  box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-radius:11px;
}
body.studio :is(.back-top,.carousel-arrows button,.menu-toggle,.marquee-toggle)::before {content:none}
body.studio :is(.back-top,.carousel-arrows button,.menu-toggle,.marquee-toggle):hover:not(:disabled) {
  background:#3e424b;color:#f4f6ff;box-shadow:none;transform:translateY(-1px);
}
body.studio .text-link {color:#c2d0ff;border-color:rgba(159,183,255,.42)}
body.studio .text-link:hover {color:#fff;border-color:#8faaff}
body.studio :is(.exp-jump a,.ft-inline-link) {border-radius:10px}
body.studio .exp-jump a:hover {background:#363c4d;border-color:#56658d;color:#fff}

/* Home: generous content width and a quiet editorial hierarchy. */
body.studio .hero {min-height:620px;gap:5.5%;padding-top:65px}
body.studio .hero h1 {
  font-size:clamp(64px,7.1vw,108px);line-height:1.03;
  letter-spacing:-.072em;
}
body.studio .hero-copy>.eyebrow {color:#bac0cb;margin-bottom:25px}
body.studio .hero-bottom>p {max-width:350px;font-size:14px;line-height:1.8}
body.studio .hero-foot {margin-top:45px;color:#a5acba}
body.studio .project-carousel {padding-top:32px}
body.studio .project-carousel::before {
  content:none;
}
body.studio .project-carousel::after {
  content:"";width:100px;height:81px;right:-12px;top:-29px;
  background:url("/assets/sketch-direction.svg") center/contain no-repeat;
  border:0;border-radius:0;box-shadow:none;filter:none;
  opacity:.82;animation:none;
}
body.studio .gallery-card {
  min-height:393px;background:var(--zeetude-card);
  border:1px solid var(--zeetude-border);border-radius:18px;
  padding:24px;box-shadow:none;
}
body.studio .gallery-card::before {content:none}
body.studio .gallery-topline>span:last-child,
body.studio .gallery-bottomline {color:#b4bac7}
body.studio .interface-window {
  border:1px solid rgba(210,214,226,.2);border-radius:12px;
  box-shadow:0 7px 18px rgba(0,0,0,.12);
}
body.studio .carousel-track {border-radius:18px}
body.studio .carousel-slide {opacity:.6;transform:scale(.99)}
body.studio .carousel-slide.is-current {opacity:1;transform:none}
body.studio .carousel-pagination button>span {background:#858a97}
body.studio .carousel-pagination button[aria-pressed=true]>span {
  background:#638bff;box-shadow:none;
}
body.studio .gallery-hint {color:#a4aab8}
body.studio .moving-strip {background:#2e3137;border-block:1px solid var(--zeetude-border);padding:17px 0}
body.studio .moving-strip::after {background:linear-gradient(270deg,#2e3137 45%,transparent)}
body.studio .marquee-group>span {color:#d4d8e2;font-family:var(--type-display);font-size:18px}
body.studio .marquee-group>i {color:#7294ff}
body.studio .lab-section {padding-top:92px;padding-bottom:82px}
body.studio .lab-intro {gap:8%;margin-top:47px}
body.studio .lab-intro p:first-child {color:#f0f1f4}
body.studio .lab-handdrawn {
  display:block;width:min(240px,58%);height:auto;
  margin-top:18px;opacity:.9;transform:rotate(-2deg);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.08));
}
body.studio .lab-values p {border-color:var(--zeetude-border)}
body.studio .lab-values span {color:#8ba7f9}
body.studio .section-label {border-color:var(--zeetude-border)}
body.studio .section-label>span:last-child {color:#949aa8}
body.studio .project-grid {gap:18px}
body.studio .project-tile {
  background:#2c2f35;border:1px solid var(--zeetude-border);
  border-radius:18px;padding:23px;box-shadow:none;
  transition:background .25s,border-color .25s,transform .25s;
}
body.studio .project-tile:hover {
  background:#31343b;border-color:rgba(158,171,206,.28);
  transform:translateY(-2px);box-shadow:none;
}
body.studio .project-tile .tile-image {
  background:#26282d;border:1px solid var(--zeetude-border);
  border-radius:14px;
}
body.studio .project-tile .tile-image::before,
body.studio .project-tile .tile-image::after {content:none}
body.studio .tile-copy h3 {color:#f4f5f8}
body.studio .tile-copy h3>span {color:#87a6ff}
body.studio .tile-copy h4 {color:#e4e7ef}
body.studio .tile-meta {color:#a5adbc}
body.studio .tile-tick {color:#8fa9fa}
body.studio .founder-section {border-color:var(--zeetude-border)}
body.studio .founder-mark::before,body.studio .founder-mark::after {
  border-color:rgba(157,173,224,.16);
}
body.studio .founder-mark img {filter:none}
body.studio .faq-list details {border-color:var(--zeetude-border)}
body.studio .faq-list summary {color:#edf0f5}
body.studio .faq-list details[open] summary,
body.studio .faq-list summary>span {color:#9fb8ff}
body.studio .closing {
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--zeetude-border);
  border-radius:20px;background:#2d3036;padding-top:70px;padding-bottom:70px;
}
body.studio .closing::after {
  content:"";position:absolute;width:150px;height:130px;right:7%;top:13%;
  background:url("/assets/sketch-direction.svg") center/contain no-repeat;
  opacity:.7;z-index:-1;pointer-events:none;
}
body.studio .closing :is(h2,p,a) {position:relative;z-index:1}

/* Product pages share the same canvas while real previews stay legible. */
body.studio.page-minis,body.studio.page-lesson,
body.studio.page-foco,body.studio.page-topo {
  --xp-bg:var(--zeetude-canvas);
  --xp-ink:#f4f5f8;--xp-muted:#b8bdc9;--xp-subtle:#a0a8ba;
  --xp-line:rgba(235,239,255,.13);
  --xp-panel:#2d3036;--xp-accent:#91aeff;--xp-accent-2:#c0d0ff;
  --xp-accent-ink:#f7f9ff;
}
body.studio .experience-page {background:transparent}
body.studio .experience-page :is(h1,h2,h3) {color:#f4f5f8}
body.studio .experience-page :is(h1,h2) {letter-spacing:-.062em}
body.studio .exp-hero {min-height:590px;padding-top:55px;padding-bottom:68px}
body.studio .exp-hero h1,body.studio .ft-page .exp-hero h1 {
  font-size:clamp(55px,6vw,92px);line-height:1.045;
}
body.studio .exp-hero .breadcrumb {margin-bottom:28px}
body.studio .exp-hero .exp-lede {line-height:1.75;color:#bbc0ce}
body.studio .exp-section {padding-top:76px}
body.studio .exp-section-head h2 {font-size:clamp(39px,4.5vw,67px)}
body.studio .exp-jump {border-color:var(--zeetude-border)}
body.studio .exp-benefit,body.studio .ft-page .exp-benefit,
body.studio .demo-frame,body.studio .ft-page .demo-frame,
body.studio .exp-conversion,body.studio .ft-page .exp-conversion {
  background:#2d3036;border-color:var(--zeetude-border);
  border-radius:17px;box-shadow:none;
}
body.studio .exp-benefit:hover {
  background:#343840;border-color:rgba(165,186,240,.31);
  transform:translateY(-2px);
}
body.studio .exp-benefit>span,body.studio .ft-page .exp-benefit>span {
  color:#9ab2ff;
}
body.studio .exp-real-screen,body.studio .ft-page .exp-real-screen {
  background:#2d3036;border-color:var(--zeetude-border);
}
body.studio .exp-conversion,body.studio .ft-page .exp-conversion {
  background:#30343b;
}
body.studio .ft-hero-visual .ft-focus-halo {
  opacity:.12;filter:blur(25px);
}
body.studio .ft-hero-visual .ft-focus-ring {
  box-shadow:none;border-color:rgba(150,173,238,.18);
}
body.studio .ft-focus-core {text-shadow:none}
body.studio .exp-faq .faq-list details {border-color:var(--zeetude-border)}
body.studio .exp-faq .faq-list summary {color:#ecedf4}
body.studio .exp-faq .faq-list p {color:#b7bdc9}

/* Restyle interactive example controls without changing any JavaScript hooks. */
body.studio :is(.ft-workout-picker button,.ft-exercise,.library-card,.mission-row) {
  border-color:var(--zeetude-border);border-radius:12px;
}
body.studio .ft-workout-picker button {background:#353840}
body.studio .ft-workout-picker button:hover {background:#3a4050}
body.studio .ft-workout-picker button[aria-pressed="true"] {
  background:#374466;border-color:#6986d7;
}
body.studio .demo-topbar {border-color:var(--zeetude-border)}
body.studio .demo-tag {border-color:var(--zeetude-border)}
body.studio .demo-frame :is(button,a):focus-visible {outline:2px solid #91acff;outline-offset:2px}

/* Legal pages, modal, and footer: no accidental black or white sections. */
body.studio .policy-wrap {background:transparent}
body.studio .policy-intro,body.studio .policy-content section,
body.studio .policy-project {
  background:var(--zeetude-raised);
  border:1px solid var(--zeetude-border);border-radius:14px;
}
body.studio .policy-index {color:#b4bccb}
body.studio .policy-content h3 {color:#f1f3f8}
body.studio .policy-project strong {color:#f3f5fb}
body.studio .policy-project small {color:#b2b8c6}
body.studio #invite-dialog {
  background:#30333a;border:1px solid var(--zeetude-border);
  border-radius:17px;box-shadow:0 22px 60px rgba(0,0,0,.24);
}
body.studio #invite-dialog :is(input,textarea) {
  background:#282b30;border-color:var(--zeetude-border);border-radius:10px;
}
body.studio .site-footer,body.studio.page-foco .site-footer,
body.studio.page-topo .site-footer {
  background:var(--zeetude-canvas);border-top:1px solid var(--zeetude-border);
}
body.studio .footer-intro>p {color:#eff1f6}
body.studio .footer-top nav,body.studio .footer-top nav .eyebrow {color:#adb5c4}
body.studio .footer-top nav a:hover {color:white}
body.studio .footer-bottom {color:#a3abba;border-color:var(--zeetude-border)}
body.studio .footer-signature>img {filter:none}

/* Calm motion, respecting user motion preference. */
body.studio.motion-ready .reveal {
  filter:none;transform:translateY(15px);
  transition:opacity .55s var(--zeetude-ease),transform .55s var(--zeetude-ease);
}
body.studio.motion-ready .reveal.visible {transform:none;filter:none}
body.studio .hero-copy>.eyebrow,body.studio .hero h1,
body.studio .hero-bottom,body.studio .project-carousel {
  animation-duration:.65s;
}
@media(max-width:1100px) {
  body.studio .mobile-menu:not([hidden]) {
    background:#30333a;border-color:var(--zeetude-border);
  }
}
@media(max-width:900px) {
  body.studio .hero {min-height:0}
  body.studio .gallery-card {min-height:320px}
}
@media(max-width:740px) {
  body.studio .container,body.studio .site-header,body.studio .policy-wrap {
    width:calc(100% - 36px);
  }
  body.studio .site-header {height:64px;top:8px;margin-top:8px;padding-inline:17px;border-radius:15px}
  body.studio .site-header.is-scrolled {height:61px}
  body.studio .mobile-menu:not([hidden]) {border-radius:15px}
  body.studio .menu-toggle {border-radius:10px}
  body.studio .hero {padding-top:47px}
  body.studio .hero h1 {font-size:clamp(59px,13.8vw,93px)}
  body.studio .project-carousel {margin-top:49px}
  body.studio .project-carousel::after {width:75px;height:61px;right:0;top:-25px}
  body.studio .gallery-card {min-height:0;border-radius:15px;padding:18px}
  body.studio .lab-section {padding-top:70px;padding-bottom:70px}
  body.studio .lab-handdrawn {width:170px;margin-top:14px}
  body.studio .project-tile {border-radius:15px;padding:15px}
  body.studio .closing {border-radius:16px;padding:48px 23px}
  body.studio .closing::after {width:89px;right:5%;top:8%;opacity:.4}
  body.studio .exp-hero {min-height:0;padding-top:44px;padding-bottom:52px}
  body.studio .exp-hero h1,body.studio .ft-page .exp-hero h1 {
    font-size:clamp(45px,10vw,70px);
  }
  body.studio .exp-section {padding-top:62px}
  body.studio .exp-benefit,body.studio .demo-frame,body.studio .exp-conversion {border-radius:14px}
}
@media(max-width:390px) {
  body.studio .hero h1 {font-size:57px}
  body.studio .closing::after {opacity:.22}
  body.studio .header-contact {display:none}
}
@media(hover:none),(pointer:coarse) {
  body.studio .project-tile:hover,body.studio .exp-benefit:hover,
  body.studio .button:hover,body.studio .exp-primary:hover {transform:none}
}
@media(prefers-reduced-motion:reduce) {
  body.studio .hero-copy>.eyebrow,body.studio .hero h1,
  body.studio .hero-bottom,body.studio .project-carousel {animation:none!important}
  body.studio.motion-ready .reveal {opacity:1;filter:none;transform:none;transition:none!important}
  body.studio :is(.button,.exp-primary,.exp-secondary,.project-tile,.exp-benefit) {
    transition:none!important;
  }
}


/* Final pass: demo workspaces also belong to the graphite canvas.
   Keep the Editor's white sheet as a deliberate document preview. */
body.studio.page-minis .mini-demo,
body.studio .mini-demo-rail,
body.studio .mini-demo-chat,
body.studio .mission-demo,
body.studio .team-stage {
  background:#2d3036;border-color:var(--zeetude-border);
}
body.studio .mini-persona:hover,
body.studio .mini-persona.active,
body.studio .mini-composer,
body.studio .mini-bubble.is-assistant,
body.studio .mini-suggestion-buttons button,
body.studio .team-steps button,
body.studio .mission-tabs button[aria-pressed="true"] {
  background:#373a43;border-color:var(--zeetude-border);
}
body.studio .mini-bubble.is-user,
body.studio .mini-suggestion-buttons button[aria-pressed="true"],
body.studio .team-steps button[aria-pressed="true"] {
  background:#374365;border-color:rgba(154,179,255,.24);
}
body.studio .mini-send-icon {background:var(--zeetude-blue);color:white}
body.studio .editor-page-wrap,
body.studio .editor-real-screen,
body.studio.page-lesson .demo-frame {
  background:#2d3036;border-color:var(--zeetude-border);
}
body.studio .editor-template-list button:hover,
body.studio .editor-template-list button[aria-pressed="true"],
body.studio .editor-format-group button:hover,
body.studio .library-filters button:hover,
body.studio .library-filters button[aria-pressed="true"] {
  background:#3a3d45;border-color:var(--zeetude-border);
}
body.studio .library-card {background:#34373f;border-color:var(--zeetude-border)}
body.studio .editor-demo-actions button {
  background:#3a3e47;border-color:var(--zeetude-border);border-radius:10px;
}
body.studio .editor-demo-actions button:hover {background:#454a55}
body.studio .ft-demo-side,
body.studio .ft-insights,
body.studio .ft-topo-overview,
body.studio .ft-topo-calendar {
  background:#2d3036;border-color:var(--zeetude-border);
}
body.studio .ft-set-buttons button,
body.studio .ft-demo-footer button,
body.studio .ft-week-days button,
body.studio .ft-topo-complete button {
  background:#383c45;border:1px solid var(--zeetude-border);
  color:#e9edf8;border-radius:10px;
}
body.studio .ft-set-buttons button[aria-pressed="true"],
body.studio .ft-week-days button[aria-pressed="true"] {
  background:var(--zeetude-blue);border-color:#688bfa;color:#fff;
}
body.studio .ft-task-mark {background:#3b414b;border-color:var(--zeetude-border)}
body.studio .ft-task input:checked+.ft-task-mark,
body.studio .ft-calendar-grid span.today {background:#658cff;color:#fff}
body.studio .ft-topo-bar {background:#414652}
body.studio .ft-topo-bar i {background:linear-gradient(90deg,#3e6ce5,#83a2ff)}
body.studio .ft-calendar-grid span.has-event::after {background:#7395ff}
body.studio .product-screenshot,body.studio .feature-trio article,
body.studio .conversation-card,body.studio .invite-section,
body.studio .note-scene,body.studio .note-paper {
  background:#2d3036;border-color:var(--zeetude-border);
}
body.studio .note-paper {background:#343841}