/* Graphical direction: charcoal surfaces, clear type, restrained orange states.
   Artwork keeps its source colors and a paper artboard where it needs contrast. */
html:root {
  color-scheme: dark;
  --paper: #171717;
  --ink: #f6f6f3;
  --surface: #222222;
  --control: #2b2b2b;
  --secondary: #b5b5b0;
  --accent: #ff8748;
}
html body,
html .pricing-page,
html .legal-page {
  background: var(--paper);
  color: var(--ink);
}
html ::selection {
  background: #ff874852;
  color: #fff;
}
html .site-header {
  background: var(--paper) !important;
  color: var(--ink);
  border: 0 !important;
  box-shadow: none !important;
}
html .brand,
html .site-header .brand {
  color: var(--ink) !important;
}
html .brand-icon svg circle {
  fill: currentColor;
}
html .site-header .navigation a,
html .navigation button {
  color: var(--secondary);
}
html .site-header .navigation a:hover,
html .navigation button:hover {
  color: #fff !important;
  opacity: 1;
}
html .site-header .navigation .nav-primary {
  background: #f6f6f3 !important;
  color: #171717 !important;
  border-radius: 10px;
}
html .site-header .navigation .nav-primary:hover {
  background: #deded9 !important;
  color: #171717 !important;
  opacity: 1;
}
html a:focus-visible,
html button:focus-visible,
html input:focus-visible,
html select:focus-visible {
  outline-color: #deded8 !important;
}
html .pill {
  border-radius: 10px;
  transform: none !important;
}
html .pill.dark {
  background: #f6f6f3;
  color: #171717;
}
html .pill.dark:hover {
  background: #deded9;
}
html .pill.soft {
  background: var(--control);
  color: #fff;
}
html .pill.soft:hover {
  background: #363636;
}
html .home-page .header-left .brand {
  display: none;
}
html .home-page .hero {
  height: clamp(720px, 100svh, 930px) !important;
  min-height: 720px !important;
  background: var(--paper) !important;
}
html .home-page .hero::before,
html .home-page .hero::after {
  display: none;
}
html .home-page .site-header .header-discovery a[href="/pricing"],
html .site-header .header-account a[href="/sign-in"] {
  display: inline-flex !important;
}
html .home-page .hero-text {
  padding: clamp(145px, 21svh, 200px) 24px 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 860px !important;
  text-align: center !important;
}
html .hero-wordmark {
  display: inline-block;
  padding: 8px 22px 12px;
  border: 6px solid #f6f6f3;
  border-radius: 999px;
  font-size: clamp(38px, 3.5vw, 52px);
  font-weight: 650;
  letter-spacing: -0.065em;
  line-height: 1.15;
  color: #f6f6f3;
}
html .home-page .hero .hero-text h1 {
  font-size: clamp(32px, 3.8vw, 50px) !important;
  line-height: 1.28 !important;
  letter-spacing: -0.038em !important;
  font-weight: 450 !important;
  max-width: 28ch !important;
  color: #f6f6f3 !important;
  margin: 78px auto 0 !important;
  text-align: center !important;
  text-wrap: balance;
}
/* Only the monochrome hero field and wordmark are inverted; never user artwork. */
html .home-page .hero-canvas,
html .home-page .hero-scroll-preview {
  top: auto !important;
  bottom: -95px !important;
  height: 330px !important;
  filter: invert(1) !important;
  opacity: 0.5 !important;
  mask-image: linear-gradient(transparent, #000 45%) !important;
  -webkit-mask-image: linear-gradient(transparent, #000 45%) !important;
}
html .morph-scroll,
html .morph-flow,
html .dimension,
html .gallery,
html .inspired,
html .try-section,
html .pricing-teaser,
html .site-footer {
  background: var(--paper) !important;
  background-image: none !important;
}
html .morph-words h2,
html .dimension-copy h2,
html .gallery-heading h2,
html .inspired-intro h2,
html .try-title h2,
html .pricing-teaser-copy h2,
html .pricing-v15-lead h1 {
  color: var(--ink) !important;
  font-weight: 450 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.12 !important;
}
html .inspired-example p,
html .try-note,
html .footer-intro p,
html .footer-nav,
html .footer-bottom,
html .pricing-v15-lead p,
html .pricing-option-row p,
html .pricing-option-end span,
html .pricing-legal,
html .pricing-v15-footer > div {
  color: var(--secondary) !important;
}
html .footer-nav a:hover,
html .footer-bottom a:hover {
  color: #fff !important;
}
html .footer-art {
  filter: invert(1);
}
html .specimen {
  box-shadow: none !important;
}
html .specimen:hover,
html .inspired-surface:hover {
  transform: none !important;
}
html .dimension-shadow {
  display: none;
}
html .pricing-teaser-link {
  background: #232323 !important;
}
html .pricing-teaser-copy .pill {
  background: #f6f6f3;
  color: #171717;
}
html .pricing-v15 .pricing-hero-offer,
html .pricing-hero-art {
  background: #222 !important;
  background-image: none !important;
}
html .pricing-hero-art::before {
  display: none;
}
html .pricing-option-row,
html .pricing-v15-footer {
  border-color: #333;
}
html .pricing-option-end a {
  background: #2b2b2b;
  color: #fff;
  border-radius: 9px;
  font-size: 14px;
}
html .pricing-option-end a:hover {
  background: #383838;
}
html .pricing-compare-grid p {
  background: transparent;
  color: #ddd;
  padding: 14px 0;
  border-radius: 0;
}
html .pricing-legal a,
html .license-activation a {
  color: #fff;
}
html .license-activation input {
  background: var(--control);
  color: #fff;
}
html .legal-content p,
html .legal-content li {
  color: #c9c9c5;
}
html .legal-content .draft-note {
  background: #272727;
  color: #d2d2ce;
  border-radius: 10px;
}
html .legal-page .auth-header .brand {
  color: #f6f6f3;
}
html .auth-page,
html .auth-shell,
html .auth-form-side {
  background: #171717 !important;
}
html .auth-page .auth-header {
  justify-content: flex-end;
}
html .auth-page .auth-brand-name {
  display: none !important;
}
html .auth-page .auth-header .brand-icon,
html .auth-page .auth-header .brand-icon svg {
  width: 34px !important;
  height: 34px !important;
}
html .auth-page .auth-field input {
  background: #292929 !important;
  border-radius: 10px !important;
}
html .auth-page .auth-field input:focus {
  background: #303030 !important;
}
html .auth-page .auth-links a,
html .auth-page .auth-bottom,
html .auth-page .auth-bottom a {
  color: #b5b5b0;
}
html .auth-page .submit {
  border-radius: 10px !important;
}
html .auth-page .auth-socials #googleSignIn {
  border-radius: 10px !important;
  background: #f5f5f2 !important;
  color: #171717 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
html .auth-page .auth-socials #googleSignIn:hover {
  background: #e5e5e1 !important;
}
html .auth-page .auth-socials .google-mark path:nth-child(1) {
  fill: #4285f4 !important;
}
html .auth-page .auth-socials .google-mark path:nth-child(2) {
  fill: #34a853 !important;
}
html .auth-page .auth-socials .google-mark path:nth-child(3) {
  fill: #fbbc05 !important;
}
html .auth-page .auth-socials .google-mark path:nth-child(4) {
  fill: #ea4335 !important;
}
html .workspace-library {
  color: var(--ink);
}
html .workspace-primary {
  background: #f6f6f3;
  color: #171717;
}
html .workspace-primary:hover {
  background: #deded9;
}
html .workspace-secondary {
  background: #2b2b2b;
  color: #fff;
}
html .workspace-secondary:hover {
  background: #383838;
}
html .workspace-filter input,
html .workspace-filter select {
  color: #d2d2ce;
  border-color: #464646;
}
html .workspace-project-meta span {
  color: #b5b5b0;
}
html .workspace-preview {
  background: #e8e9e5;
}
html .workspace-preview:hover {
  background: #f3f3ee;
}
html .project-menu summary:hover {
  background: #303030;
}
html .project-menu > div {
  background: #292929;
  box-shadow: 0 12px 35px #0007;
}
html .project-menu button,
html .project-menu a {
  color: #eee;
}
html .project-menu button:hover,
html .project-menu a:hover {
  background: #383838;
}
html .project-menu .delete-project,
html .workspace-error {
  color: #ffa080;
}
html .project-dialog {
  background: #222;
  color: #f6f6f3;
  box-shadow: 0 20px 80px #0008;
}
html dialog::backdrop {
  background: #0009;
}
html .project-dialog input {
  background: #333;
  color: #fff;
}
html .editor-workspace {
  background: #e8e9e5;
  color: #f6f6f3;
}
html .studio-save-status {
  color: #b5b5b0;
}
html .home-page .studio-image-mode > span {
  color: #b5b5b0 !important;
}
html .home-page .try-toolbar {
  background: #222;
  box-shadow: none;
  backdrop-filter: none;
  border-radius: 12px;
}
html .home-page .try-toolbar button {
  color: #eee;
  border-radius: 8px;
}
html .home-page .try-toolbar button:hover,
html .home-page .try-toolbar button.selected {
  background: #383838;
}
html .home-page .try-toolbar .save-btn {
  background: #f6f6f3;
  color: #171717;
}
html .home-page .try-toolbar .save-btn:hover {
  background: #deded9;
}
html .home-page .try-toolbar input[type="text"] {
  background: #333;
  color: #fff;
  border-radius: 8px;
}
html .home-page .try-settings {
  background: #222 !important;
  color: #ddd;
  border-radius: 12px !important;
  backdrop-filter: none;
}
html .home-page .settings-row > label,
html .home-page .settings-label,
html .home-page .color-swatch.active {
  color: #eee;
}
html .home-page .settings-row output,
html .home-page .color-swatch {
  color: #b5b5b0;
}
html .home-page .engine-controls {
  border-color: #3a3a3a;
}
html .home-page .engine-controls select,
html .home-page .engine-controls button,
html .home-page .engine-controls input[type="number"] {
  background: #333;
  color: #fff;
}
html .home-page .studio-mode-pills {
  background: #333;
  border-radius: 8px;
}
html .home-page .studio-mode-pills button {
  color: #bbb;
  border-radius: 5px;
}
html .home-page .studio-mode-pills button.is-active {
  background: #555;
  color: #fff;
}
html .home-page .engine-message {
  color: #ffa080;
}
html .studio-notification,
html .studio-export-error {
  color: #ffa080;
}
html .material-advanced {
  border-color: #333;
  color: #bbb;
}
@media (max-width: 900px) {
  html .auth-page .auth-art {
    display: none !important;
  }
  html .auth-page .auth-shell {
    display: block !important;
  }
}
@media (max-width: 740px) {
  html .home-page .header-left .brand {
    display: none;
  }
  html .home-page .hero {
    height: 690px !important;
    min-height: 690px !important;
  }
  html .home-page .hero-text {
    padding: 155px 24px 0 !important;
  }
  html .hero-wordmark {
    font-size: 38px;
    border-width: 5px;
    padding: 8px 18px 11px;
  }
  html .home-page .hero .hero-text h1 {
    font-size: 32px !important;
    max-width: 22ch !important;
    margin-top: 60px !important;
  }
  html .home-page .hero-canvas,
html .home-page .hero-scroll-preview {
    height: 220px !important;
    bottom: -65px !important;
  }
}
/* Grainform refinements. Page-specific geometry wins over the legacy V17 demo rules. */
html .ui-icon { display:block; flex:none; width:20px; height:20px; overflow:visible; }
html .home-page .site-header { height:76px; padding:0 clamp(24px,4vw,64px)!important; }
html .site-header .navigation .nav-primary { border-radius:999px!important; padding:11px 21px!important; }
html .home-page .hero { height:auto!important; min-height:0!important; padding:142px 24px 24px; display:flex; flex-direction:column; align-items:center; }
html .home-page .hero-text { padding:0!important; width:100%!important; max-width:850px!important; pointer-events:auto; }
html .hero-brand { display:inline-flex; align-items:center; gap:14px; font-size:42px; font-weight:650; letter-spacing:-.055em; line-height:1.1; }
html .hero-brand svg { display:block; width:56px; height:56px; overflow:visible; }
html .hero-brand svg circle { fill:#f6f6f3; }
html .home-page .hero .hero-text h1 { margin:46px auto 0!important; font-size:clamp(34px,4vw,52px)!important; max-width:25ch!important; line-height:1.22!important; }
html .home-page .hero-canvas,
html .home-page .hero-scroll-preview { position:relative!important; inset:auto!important; top:auto!important; bottom:auto!important; margin:16px auto 0; width:min(780px,100%)!important; height:290px!important; transform:none!important; filter:invert(1)!important; opacity:.8!important; mask-image:radial-gradient(ellipse at center,#000 40%,transparent 74%)!important; -webkit-mask-image:radial-gradient(ellipse at center,#000 40%,transparent 74%)!important; }
html .home-page .hero-scroll-preview { position:absolute!important; bottom:24px!important; left:50%!important; transform:translateX(-50%)!important; margin:0; }
html .gallery { max-width:1184px; margin:0 auto; padding:88px 32px 100px!important; }
html .gallery-heading { padding:0!important; margin-bottom:32px; }
html .gallery-heading h2 { font-size:clamp(34px,4vw,52px)!important; }
html .specimen-grid { display:grid; columns:auto; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:1120px; }
html .specimen { width:100%!important; height:auto!important; aspect-ratio:1.15; margin:0!important; transform:none!important; border-radius:20px; }
html .specimen.dark { background:#292929; }
html .specimen.chalk,
html .specimen.stone,
html .specimen.bone { background:#f1f0e9; }
html .specimen[hidden] { display:none!important; }
html .gallery-more { display:block; margin:26px auto 0; border:0; border-radius:999px; padding:12px 22px; background:#303030; color:#f6f6f3; font:500 14px Inter,sans-serif; }
html .gallery-more:hover { background:#3c3c3c; }
html .pricing-teaser-link:hover .pricing-link-label { background:#deded9!important; color:#171717!important; transform:none!important; }
html .pricing-teaser-copy .pricing-link-label { border-radius:999px; height:44px; font-size:15px; }
html .pricing-teaser-copy h2 { font-size:clamp(36px,4vw,58px)!important; }

/* Auth geometry and browser-owned autofill/focus states. */
html .auth-page .auth-field input { border-radius:12px!important; background:#292929!important; color:#f6f6f3!important; caret-color:#f6f6f3; }
html .auth-page .auth-field input:focus { outline:2px solid #deded8!important; outline-offset:2px; background:#303030!important; }
html .auth-page .auth-field input:-webkit-autofill,
html .auth-page .auth-field input:-webkit-autofill:hover,
html .auth-page .auth-field input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px #292929 inset!important; box-shadow:0 0 0 1000px #292929 inset!important; -webkit-text-fill-color:#f6f6f3!important; caret-color:#ff9c65; }
html .auth-page .auth-field input:autofill { box-shadow:0 0 0 1000px #292929 inset!important; color:#f6f6f3!important; }
html .auth-page .auth-field input::selection { background:#ff874852; color:#fff; }
html .auth-page .submit { border-radius:999px!important; }
html .auth-page .auth-socials #googleSignIn { border-radius:12px!important; }
html .auth-page .password-eye { width:36px; min-width:36px; right:8px!important; display:grid; place-items:center; border-radius:9px; }
html .auth-page .password-eye svg { width:19px; height:19px; display:block; }
html .auth-page .password-eye:focus-visible { outline-color:#deded8!important; }

/* Library: open composition, one search, and menus in the browser top layer. */
html .workspace-header { position:relative!important; height:80px; padding:0 32px!important; gap:24px; overflow:visible; }
html .workspace-header .brand { font-size:20px!important; }
html .workspace-header .navigation button { font-size:14px; }
html .workspace-search { position:absolute; left:50%; transform:translateX(-50%); width:min(300px,34vw); height:42px; display:flex; align-items:center; gap:10px; padding:0 14px; background:#252525; border-radius:999px; color:#b5b5b0; }
html .workspace-search span { flex:none; }
html .workspace-search svg { width:17px; height:17px; }
html .workspace-search input { width:100%; min-width:0; background:none; border:0; padding:0; color:#f6f6f3; font:14px Inter,sans-serif; outline:none; }
html .workspace-search:focus-within { box-shadow:0 0 0 2px #ff8748; }
html .workspace-search input:focus-visible { outline:none!important; }
html .workspace-library { max-width:1440px; padding:56px 32px 100px; overflow:visible; }
html .workspace-heading { margin-bottom:58px; align-items:center; }
html .workspace-heading h1 { font-size:clamp(30px,3vw,40px); font-weight:450; letter-spacing:-.04em; line-height:1.2; }
html .workspace-actions { align-items:center; gap:10px; }
html .workspace-primary,
html .workspace-secondary { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:10px 17px; min-height:42px; line-height:20px; overflow:visible; border-radius:999px; white-space:nowrap; }
html .workspace-actions button span { display:flex; flex:none; }
html .workspace-actions svg { width:18px; height:18px; }
html .workspace-filter { min-height:42px; margin-bottom:18px; }
html .workspace-filter h2 { font-size:15px; font-weight:500; color:#d1d1cc; }
html .workspace-filter select { border:0; background:#282828; padding:10px 32px 10px 14px; border-radius:999px; max-width:220px; }
html .workspace-projects { gap:30px 18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
html .workspace-projects article { min-width:0; overflow:visible; }
html .workspace-preview { aspect-ratio:1.35; border-radius:20px; background:#f1f0e9; }
html .workspace-preview svg { padding:28px; }
html .workspace-project-meta { align-items:center; padding:14px 3px 0; font-size:15px; }
html .workspace-project-meta a { line-height:1.4; }
html .project-menu > button { display:grid; place-items:center; width:32px; height:32px; border:0; padding:0; border-radius:10px; background:none; color:#b5b5b0; }
html .project-menu > button:hover,
html .project-menu > button[aria-expanded="true"] { background:#333; color:#fff; }
html .project-menu .project-popover { position:fixed; inset:auto; margin:0; min-width:0; width:188px; max-height:calc(100dvh - 24px); overflow:auto; padding:6px; border:0; border-radius:14px; background:#2b2b2b; color:#f6f6f3; box-shadow:0 10px 35px #0007; }
html .project-popover:not(:popover-open) { display:none; }
html .project-popover a,
html .project-popover button { display:block; width:100%; border:0; padding:11px 12px; border-radius:8px; background:none; color:#f6f6f3; font:14px Inter,sans-serif; text-align:left; }
html .project-popover a:hover,
html .project-popover button:hover { background:#3a3a3a; }
html .project-popover button.delete-project { color:#ffa080; }
html .workspace-empty { padding:65px 0; }
html .workspace-empty h2 { font-size:25px; max-width:25ch; }

/* Studio: compact tool dock, calm canvas, contextual controls. */
html .project-dialog { border-radius:20px; max-height:calc(100dvh - 32px); overflow:auto; }
html .project-dialog input { border-radius:11px; }

@media(max-width:1000px) {
 html .workspace-projects { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:740px) {
 html .home-page .hero { padding:136px 22px 24px; }
 html .hero-brand { font-size:34px; gap:10px; }
 html .hero-brand svg { width:46px; height:46px; }
 html .home-page .hero .hero-text h1 { font-size:34px!important; margin-top:38px!important; max-width:20ch!important; }
 html .home-page .hero-canvas,
html .home-page .hero-scroll-preview { height:230px!important; }
 html .gallery { padding:64px 20px 80px!important; }
 html .specimen-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 html .specimen { border-radius:16px; aspect-ratio:1; }
 html .workspace-header { height:116px; padding:14px 20px 64px!important; }
 html .workspace-header .brand { font-size:18px!important; }
 html .workspace-search { top:65px; width:calc(100% - 40px); max-width:450px; height:38px; }
 html .workspace-library { padding:38px 20px 70px; }
 html .workspace-heading { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:34px; }
 html .workspace-heading h1 { font-size:32px; }
 html .workspace-actions { margin:0; }
 html .workspace-filter { flex-direction:row; align-items:center; }
 html .workspace-projects { gap:25px 14px; }
 html .workspace-preview { border-radius:16px; }
 html .workspace-preview svg { padding:18px; }
 html .studio-save-status { display:none; }
}
@media(max-width:480px) {
 html .workspace-projects { grid-template-columns:1fr; }
 html .workspace-actions button { font-size:13px; padding:10px 14px; }
}
/* A single plan chooser keeps prices and the purchase decision together. */
html .plans-dialog { width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:32px; border:0; border-radius:22px; background:#222; color:#f6f6f3; box-shadow:0 25px 100px #0008; font:14px/1.5 Inter,sans-serif; color-scheme:dark; }
html .plans-dialog::backdrop { background:#0009; }
html .plans-heading { text-align:center; margin:2px 0 26px; }
html .plans-mark { display:inline-flex; margin-bottom:14px; }
html .plans-mark svg { width:34px; height:34px; }
html .plans-mark circle { fill:#f6f6f3; }
html .plans-heading h2 { margin:0; font-size:28px; font-weight:550; letter-spacing:-.045em; line-height:1.2; }
html .plans-heading p { font-size:13px; color:#c3c3bd; margin:9px 0 0; }
html .plans-close { position:absolute; top:16px; right:16px; border:0; background:transparent; color:#c3c3bd; border-radius:9px; width:32px; height:32px; display:grid; place-items:center; cursor:pointer; }
html .plans-close:hover { background:#333; color:white; }
html .plans-dialog .ui-icon { width:18px; height:18px; flex:none; }
html .plans-dialog :focus-visible { outline:2px solid #f6f6f3; outline-offset:3px; }
html .plans-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; margin:0; border:0; background:#303030; border-radius:12px; }
html .plans-selector label { min-width:0; position:relative; cursor:pointer; }
html .plans-selector input { position:absolute; width:1px; height:1px; opacity:0; }
html .plans-selector span { display:block; padding:8px; text-align:center; border-radius:9px; color:#c3c3bd; font-size:14px; font-weight:500; transition:background .15s,color .15s; }
html .plans-selector label:hover span { color:white; }
html .plans-selector input:checked + span { background:#f6f6f3; color:#171717; }
html .plans-selector input:focus-visible + span { outline:2px solid white; outline-offset:2px; }
html .plans-selected { padding-top:24px; }
html .plan-price { display:flex; align-items:baseline; gap:9px; font-size:42px; font-weight:500; letter-spacing:-.045em; line-height:1.2; }
html .plan-price span { font-size:14px; color:#c3c3bd; font-weight:400; letter-spacing:0; }
html .plan-license { color:#c3c3bd; font-size:12px; margin:8px 0 22px; }
html .plans-features { display:grid; grid-template-columns:1fr 1fr; gap:13px 16px; list-style:none; margin:0 0 26px; padding:0; }
html .plans-features li { display:flex; align-items:center; gap:9px; font-size:13px; }
html .plans-features li.not-included { color:#aaa; }
html .plans-continue { width:100%; min-height:42px; padding:10px 18px; display:flex; align-items:center; justify-content:center; gap:10px; background:#f6f6f3; color:#171717; border:0; border-radius:999px; text-decoration:none; font:600 14px/1.5 Inter,sans-serif; cursor:pointer; }
html .plans-continue:hover:not(:disabled) { background:#deded9; }
html .plans-continue:disabled { color:#c3c3bd; background:#383838; cursor:default; }
html .plans-note { font-size:12px; color:#c3c3bd; margin:14px 0 25px; text-align:center; }
html .plans-activation { padding-top:18px; border-top:1px solid #ffffff12; }
html .plans-activation summary { display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:13px; color:#c3c3bd; list-style:none; }
html .plans-activation summary::-webkit-details-marker { display:none; }
html .plans-activation summary > span { display:flex; align-items:center; gap:5px; color:#f6f6f3; font-weight:500; }
html .plans-activation[open] summary .ui-icon { transform:rotate(180deg); }
html .plans-activation form { display:flex; gap:8px; margin-top:16px; }
html .plans-activation input { min-width:0; flex:1; height:42px; background:#333; border:0; border-radius:10px; padding:0 13px; color:white; font:14px Inter,sans-serif; }
html .plans-activation button { border:0; border-radius:999px; background:#f6f6f3; color:#171717; padding:0 18px; font:500 14px Inter,sans-serif; cursor:pointer; }
html .plans-activation button:disabled { opacity:.5; cursor:default; }
html .plans-activation [role="status"] { font-size:13px; color:#ddd; line-height:1.5; margin:12px 0 0; }
html .plans-activation [role="status"]:empty { display:none; }
html .plans-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; color:#aaa; font-size:12px; margin-top:24px; }
html .plans-footer > div { display:flex; gap:14px; }
html .plans-footer a { color:#c3c3bd; text-decoration:none; }
html .plans-footer a:hover { color:white; }
@media(max-width:440px) {
 html .plans-dialog { padding:28px 24px 24px; }
 html .plans-heading h2 { font-size:25px; }
 html .plans-heading { margin-bottom:22px; }
 html .plans-features { grid-template-columns:1fr; gap:10px; margin-bottom:22px; }
 html .plan-price { font-size:38px; }
 html .plans-note { line-height:1.5; }
}
html .material-looks > span { display:none!important; }
html .material-looks .studio-mode-pills { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px!important; padding:0!important; border-radius:0!important; background:transparent!important; }
html .material-looks [data-grain-style] { display:flex; flex-direction:column; gap:9px; min-width:0; padding:0!important; background:transparent!important; border:0!important; border-radius:12px!important; color:#c5c5bf!important; font:500 12px/1.4 Inter,sans-serif; }
html .material-looks [data-grain-style] canvas { display:block; width:100%; aspect-ratio:1.4; height:auto; background:#f1f0e9; border-radius:12px; transition:box-shadow .12s; }
html .material-looks [data-grain-style]:hover canvas { box-shadow:0 0 0 2px #777; }
html .material-looks [data-grain-style][aria-pressed="true"] { color:white!important; }
html .material-looks [data-grain-style][aria-pressed="true"] canvas { box-shadow:0 0 0 2px #e5e5df; }
html .material-looks [data-grain-style]:disabled { opacity:.55; }
/* Inline source studies sit on the same baseline as their words. */
html .home-page .site-header { justify-content:flex-end; gap:28px; }
html .site-header .header-actions { display:flex; gap:20px; align-items:center; }
html .site-header .header-account { display:inline-flex; }
html .home-page .site-header > .brand { display:inline-flex; font-size:19px!important; gap:9px!important; }
html .home-page .hero { padding-top:164px; }
html .home-page .hero .hero-text h1 { margin:0 auto!important; max-width:29ch!important; font-size:clamp(34px,4.1vw,54px)!important; line-height:1.42!important; letter-spacing:-.045em!important; }
html .hero-phrase { white-space:nowrap; }
html .hero-inline { display:inline-block; position:relative; width:1.25em; height:1em; margin-left:.17em; vertical-align:-.1em; border-radius:.24em; background:#2c2c2c; overflow:hidden; }
html .hero-image { width:1.32em; }
html .hero-image img { display:block; width:100%; height:100%; object-fit:cover; animation:hero-photo 7s ease-in-out infinite alternate; }
html .hero-logo { width:1em; background:#f4f4f0; }
html .hero-logo svg { position:absolute; inset:12%; width:76%; height:76%; animation:hero-logo 7s ease-in-out infinite; }
html .hero-grain canvas { display:block; width:100%; height:100%; }
@keyframes hero-photo { from { transform:scale(1); } to { transform:scale(1.15) translate(-2%,2%); } }
@keyframes hero-logo { 0%,30%,100% { transform:rotate(0); } 60% { transform:rotate(-8deg); } }
@media(max-width:600px) {
 html .home-page .site-header { gap:16px; padding:0 20px!important; }
 html .site-header .header-actions { gap:14px!important; }
 html .site-header .header-actions a { font-size:14px!important; }
 html .site-header .header-actions .nav-primary { padding:9px 15px!important; }
 html .home-page .site-header > .brand { font-size:16px!important; }
 html .home-page .site-header > .brand .brand-icon,
 html .home-page .site-header > .brand svg { width:25px!important; height:25px!important; }
 html .home-page .hero { padding:136px 22px 20px; }
 html .home-page .hero .hero-text h1 { font-size:clamp(29px,7.8vw,42px)!important; max-width:22ch!important; line-height:1.5!important; }
}
@media(max-width:360px) {
 html .home-page .site-header { padding:0 15px!important; gap:13px; }
 html .site-header .header-actions { gap:11px!important; }
 html .home-page .site-header > .brand { font-size:15px!important; gap:6px!important; }
 html .site-header .header-actions .nav-primary { padding:8px 12px!important; }
 html .home-page .hero { padding-inline:16px; }
}
@media(prefers-reduced-motion:reduce) {
 html .hero-inline img, html .hero-inline svg { animation:none; }
}
/* Legal text stays in a readable measure without cards or draft placeholders. */
html .legal-header { width:min(1120px,calc(100% - 48px)); margin:0 auto; height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
html .legal-header .brand { display:inline-flex; align-items:center; gap:10px; font:600 19px Inter,sans-serif; letter-spacing:-.035em; text-decoration:none; }
html .legal-header nav { display:flex; gap:22px; font:14px Inter,sans-serif; }
html .legal-header nav a { color:#b5b5b0; text-decoration:none; }
html .legal-header nav a[aria-current="page"], html .legal-header nav a:hover { color:#f6f6f3; }
html .legal-content { width:min(680px,calc(100% - 48px)); margin:52px auto 90px; }
html .legal-content h1 { font-size:clamp(32px,5vw,44px); letter-spacing:-.045em; font-weight:550; line-height:1.2; margin:0; }
html .legal-content .legal-date { color:#a8a8a2; font-size:13px; margin:12px 0 34px; }
html .legal-content h2 { font-size:21px; font-weight:550; letter-spacing:-.025em; margin:38px 0 12px; }
html .legal-content p, html .legal-content li { color:#d6d6d0; font-size:15px; line-height:1.75; }
html .legal-content li { margin-bottom:12px; }
html .legal-content ul { padding-left:22px; }
html .legal-content a { color:#f6f6f3; text-decoration-color:#777; text-underline-offset:3px; }
html .legal-footer { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:0 0 28px; display:flex; justify-content:space-between; color:#b5b5b0; font:12px Inter,sans-serif; }
html .legal-footer a { color:#d6d6d0; }
@media(max-width:600px) {
 html .legal-header { height:74px; }
 html .legal-header nav { gap:16px; font-size:13px; }
 html .legal-content { margin-top:34px; }
}
/* Progressive squircle geometry. Round pills remain round. */
html :is(button, input:not([type="range"]):not([type="checkbox"]), textarea, select, dialog, [popover], .specimen, .workspace-preview, .studio-source-preview, .hero-inline, .source-mark, .try-stage, .studio-mode-pills, .plans-selector, .plans-selector span) { corner-shape:squircle; }
html :is(.nav-primary, .pill, .submit, .plans-continue, .gallery-more, .studio-export-action, .studio-save-action button, .plans-activation button, .workspace-actions button, .workspace-search, .try-toolbar button, .studio-dimensions button) { corner-shape:round; }

html .home-page .site-header .header-actions > a[href="/pricing"] { display:inline-flex!important; }
html :is(.nav-primary, .pill, .submit, .plans-continue, .gallery-more, .studio-export-action, .studio-save-action button, .plans-activation button, .workspace-actions button, .workspace-search, .try-toolbar button, .studio-dimensions button) { corner-shape:round!important; }

/* A source, a result, a handoff. The landing demo is not another inspector. */
html .home-page .playground-preview { max-width:1120px; margin:32px auto 0; padding:0 32px 72px; scroll-margin-top:90px; }
html .playground-preview .try-title { margin:0 0 28px; padding:0; }
html .playground-preview .try-title h2 { font:450 clamp(30px,3.6vw,44px)/1.15 Inter,sans-serif; font-size:clamp(30px,3.6vw,44px)!important; line-height:1.15!important; letter-spacing:-.045em!important; }
html .playground-preview [hidden] { display:none!important; }
html .preview-source-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
html .preview-samples { display:flex; align-items:center; gap:6px; }
html .preview-samples button { display:flex; align-items:center; gap:10px; min-height:48px; padding:6px 13px 6px 7px; border:0; border-radius:14px; background:transparent; color:#bdbdb7; font:500 14px Inter,sans-serif; transition:background .15s,color .15s; }
html .preview-samples button:hover { color:#fff; background:#282828; }
html .preview-samples button[aria-pressed="true"] { background:#303030; color:#fff; }
html .preview-samples :is(img,.preview-logo,.preview-type) { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:#f1f0e9; object-fit:cover; color:#232323; corner-shape:squircle; }
html .preview-samples .preview-logo svg { width:25px; height:25px; }
html .preview-samples .preview-type { font-size:18px; letter-spacing:-.07em; }
html .preview-source-bar #uploadButton { display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px; border:0; border-radius:999px; padding:10px 16px; background:#303030; color:#f6f6f3; font:500 14px Inter,sans-serif; corner-shape:round!important; }
html .preview-source-bar #uploadButton:hover { background:#3b3b3b; }
html .preview-type-row { margin:0 0 18px; }
html .preview-type-row input { width:100%; box-sizing:border-box; height:46px; padding:0 16px; background:#2b2b2b; color:#f6f6f3; border:0; border-radius:12px; font:16px Inter,sans-serif; outline:0; }
html .preview-type-row input:focus-visible { box-shadow:0 0 0 2px #dadad4; }
html .home-page .playground-preview .try-stage { height:440px; min-height:0; width:100%; border-radius:22px; background:#f1f0e9!important; }
html .preview-original { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:contain; z-index:2; }
html .preview-compare { position:absolute; z-index:3; top:16px; left:50%; transform:translateX(-50%); display:flex; gap:2px; padding:3px; border-radius:999px; background:#e5e4de; corner-shape:round!important; }
html .preview-compare button { border:0; border-radius:999px; background:none; color:#65655e; padding:8px 15px; font:500 13px Inter,sans-serif; corner-shape:round!important; }
html .preview-compare button[aria-pressed="true"] { background:#fff; color:#222; }
html .preview-interaction-hint { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#50504b; font:12px Inter,sans-serif; white-space:nowrap; pointer-events:none; }
html .playground-preview .preview-status { position:absolute; left:18px; top:auto!important; bottom:18px; z-index:3; color:#68685f!important; font:12px Inter,sans-serif; }
html .playground-preview .preview-status b { color:#35352f!important; font-weight:500; }
html .preview-finish-bar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:20px; }
html .preview-finish-bar .material-looks { width:268px; flex:none; }
html .preview-finish-bar .material-looks [data-grain-style] canvas { height:54px; width:100%; aspect-ratio:auto; border-radius:10px; corner-shape:squircle; }
html .preview-finish-bar .material-looks [data-grain-style] { gap:7px; font-size:12px; }
html .preview-actions { display:flex; align-items:center; gap:10px; }
html .preview-actions button { display:flex; align-items:center; justify-content:center; gap:10px; min-height:42px; border:0; border-radius:999px; font:500 14px Inter,sans-serif; corner-shape:round!important; }
html .preview-actions #saveField { padding:11px 18px; background:#f6f6f3; color:#1c1c1c; }
html .preview-actions #saveField:hover { background:#deded8; }
html .preview-actions #exportButton { width:42px; padding:0; background:transparent; color:#d8d8d2; }
html .preview-actions #exportButton:hover { background:#303030; color:#fff; }
html .playground-preview .ui-icon { width:18px; height:18px; flex:none; }
html .playground-preview button:focus-visible { outline:2px solid #efefea; outline-offset:3px; }
html .preview-compare button:focus-visible { outline-color:#333; }
html .playground-preview button:disabled { opacity:.45; cursor:wait; }
html .preview-privacy { margin:22px 0 0; color:#b5b5af; max-width:540px; font:12px/1.6 Inter,sans-serif; }
html .preview-privacy summary { width:fit-content; cursor:pointer; }
html .preview-privacy p { margin:8px 0 0; color:#c4c4bd; }
html .playground-preview .try-note { margin:16px 0 0; color:#d4d4cd!important; font:13px/1.5 Inter,sans-serif; text-align:left; }
html .playground-preview .try-note:empty { display:none; }
@media(max-width:740px) {
 html .home-page .playground-preview { margin-top:24px; padding:0 20px 52px; }
 html .playground-preview .try-title { margin-bottom:22px; }
 html .preview-source-bar { flex-wrap:wrap; gap:12px; }
 html .preview-samples { gap:3px; }
 html .preview-samples button { padding-right:10px; gap:7px; font-size:13px; }
 html .preview-source-bar #uploadButton { min-height:40px; padding:9px 14px; font-size:13px; }
 html .home-page .playground-preview .try-stage { height:340px; border-radius:18px; }
 html .preview-finish-bar { flex-wrap:wrap; gap:22px; }
 html .preview-finish-bar .material-looks { width:100%; }
 html .preview-finish-bar .material-looks [data-grain-style] canvas { height:66px; }
 html .preview-actions { width:100%; justify-content:flex-end; }
 html .preview-actions #saveField { flex:1; }
 html .preview-actions #exportButton { background:#292929; }
 html .playground-preview .preview-status { bottom:16px; left:14px; font-size:11px; }
 html .preview-interaction-hint { bottom:40px; font-size:11px; }
 html .preview-privacy { margin-top:18px; }
}
@media(max-width:420px) {
 html .preview-source-bar { gap:10px; }
 html .preview-samples { width:100%; justify-content:space-between; }
 html .preview-samples button { flex:1; justify-content:center; }
 html .preview-source-bar #uploadButton { width:100%; }
 html .home-page .playground-preview .try-stage { height:310px; }
}

/* A compact plan selector and a small, product-specific grain study. */
html :is(.plans-selector,.plans-selector span,.plans-continue,.plans-activation button,.preview-compare,.preview-compare button) {border-radius:999px!important;corner-shape:round!important;}
html .plan-summary {display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:115px;margin-bottom:16px;}
html .plan-summary .plan-license {margin-bottom:0;max-width:245px;}
html .plan-study {width:112px;flex:none;}
html .plan-study svg {display:block;width:100%;height:auto;}
html .plans-heading {margin-bottom:22px;}
html .plans-selected {padding-top:10px;}
html .plans-activation {border:0;padding-top:0;}
html .license-help {margin:14px 0 0;color:#ccc;font-size:12px;line-height:1.5;}
html .home-page .morph-scroll {height:auto!important;min-height:0!important;padding:96px max(24px,6vw) 100px;overflow:hidden;}
html .home-page .morph-flow {display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:40px;height:auto!important;}
html .home-page .morph-words {position:static;transform:none;width:auto;max-width:470px;order:0;}
html .home-page .morph-canvas {position:static;inset:auto;width:100%;height:480px;order:1;pointer-events:none;filter:none;opacity:1;mix-blend-mode:normal;}
html .home-page .morph-words h2 {font-size:clamp(38px,4.3vw,68px)!important;line-height:1.08!important;}
html .morph-replay {margin-top:24px;border:0;background:none;color:#c8c8c2;padding:8px 0;font:500 13px Inter,sans-serif;cursor:pointer;}
html .morph-replay:hover {color:white;}
@media(max-width:780px) {
 html .home-page .morph-scroll {padding:64px 24px 72px;}
 html .home-page .morph-flow {grid-template-columns:1fr;gap:20px;}
 html .home-page .morph-canvas {height:360px;}
 html .home-page .morph-words h2 {font-size:clamp(36px,8.5vw,54px)!important;}
 html .plan-study {width:88px;}
}
@media(max-width:360px) {html .home-page .morph-canvas {height:300px;}html .plan-summary {gap:8px;}html .plan-study {width:72px;}}