@layer reset, base, components, pages, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; }
  [hidden] { display: none !important; }
  img, svg, canvas { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  a { color: inherit; text-decoration: none; }
}

@layer base {
  :root {
    --ink: #171816;
    --ink-soft: #53544f;
    --paper: #f4f2ed;
    --paper-warm: #ece8df;
    --white: #fffdf9;
    --line: rgba(23, 24, 22, .14);
    --acid: #d8ff62;
    --coral: #ff6e4a;
    --violet: #7759f5;
    --sky: #a9d5ff;
    --radius: 22px;
    --shadow: 0 28px 80px rgba(27, 26, 22, .12);
    --sans: Inter, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    --serif: Iowan Old Style, "Times New Roman", Times, serif;
  }
  body { color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
  ::selection { background: var(--acid); color: var(--ink); }
  :focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
  em { font-family: var(--serif); font-weight: 400; }
  button { color: inherit; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .skip-link { position: fixed; z-index: 9999; top: 12px; left: 12px; padding: 10px 16px; color: white; background: var(--ink); transform: translateY(-200%); border-radius: 999px; }
  .skip-link:focus { transform: translateY(0); }
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }
}

@layer components {
  .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 760; letter-spacing: -.04em; }
  .brand-mark { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
  .button { display: inline-flex; align-items: center; justify-content: center; gap: 30px; min-height: 54px; padding: 0 25px; border: 1px solid transparent; border-radius: 999px; font-weight: 700; line-height: 1; cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; }
  .button:hover { transform: translateY(-2px); }
  .button:active { transform: translateY(0) scale(.98); }
  .button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
  .button-primary { background: var(--acid); color: var(--ink); box-shadow: 0 10px 30px rgba(152, 184, 50, .18); }
  .button-primary:hover { background: #e1ff83; box-shadow: 0 14px 34px rgba(152, 184, 50, .3); }
  .button-dark { color: white; background: var(--ink); }
  .button-dark:hover { background: #343631; }
  .button-light { color: var(--ink); background: var(--white); }
  .button-outline { background: transparent; border-color: var(--line); }
  .button-outline:hover { background: var(--white); }
  .button-small { min-height: 42px; padding: 0 18px; gap: 12px; font-size: 13px; }
  .button-large { min-height: 64px; padding: 0 34px; }
  .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #64a859; box-shadow: 0 0 0 5px rgba(100, 168, 89, .12); }
  .section { padding: 130px max(5vw, 30px); }
  .section-index { display: block; margin-bottom: 28px; color: #777970; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
  .section-index.light { color: rgba(255,255,255,.46); }
  .section-heading { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 60px; margin-bottom: 64px; }
  .section-heading .section-index { grid-column: 1 / -1; margin: 0; }
  .section-heading h2 { margin: 0; font-size: clamp(48px, 6.5vw, 96px); line-height: .88; letter-spacing: -.065em; }
  .section-heading h2 em { color: var(--violet); }
  .section-heading p { max-width: 470px; margin: 0 0 4px; color: var(--ink-soft); font-size: 19px; line-height: 1.55; }
  .text-link { display: inline-flex; align-items: center; gap: 22px; padding: 10px 0; font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--ink); }
  .icon-button { display: grid; width: 36px; height: 36px; padding: 8px; place-items: center; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
  .icon-button:hover { background: rgba(23,24,22,.07); }
  .icon-button svg, .tool-button svg, .privacy-icon svg, .privacy-note svg, .command-palette svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}

@layer pages {
  .landing-body { overflow-x: hidden; }
  .site-header { position: relative; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; min-height: 82px; padding: 0 max(5vw, 30px); border-bottom: 1px solid var(--line); }
  .site-header.is-scrolled { position: fixed; top: 0; background: rgba(244,242,237,.86); backdrop-filter: blur(18px); animation: slideDown .3s ease; }
  @keyframes slideDown { from { transform: translateY(-100%); } }
  .site-nav { display: flex; gap: 34px; color: var(--ink-soft); font-size: 13px; font-weight: 650; }
  .site-nav a { transition: color .2s; }
  .site-nav a:hover { color: var(--ink); }
  .header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
  .language-control select { height: 38px; padding: 0 24px 0 10px; border: 0; color: var(--ink-soft); background: transparent; font-size: 12px; font-weight: 750; cursor: pointer; }

  .hero { position: relative; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 60px; min-height: calc(100vh - 82px); padding: 80px max(5vw, 30px) 100px; overflow: hidden; }
  .hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .38; }
  .glow-one { top: 4%; left: 30%; width: 420px; height: 420px; background: #d8ff62; }
  .glow-two { right: -5%; bottom: -10%; width: 550px; height: 550px; background: #b9abff; }
  .hero-copy { position: relative; z-index: 2; max-width: 720px; }
  .hero-copy h1 { margin: 32px 0 30px; font-size: clamp(64px, 7.2vw, 120px); line-height: .82; letter-spacing: -.073em; }
  .hero-copy h1 em { color: var(--coral); }
  .hero-lead { max-width: 610px; margin: 0; color: var(--ink-soft); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.6; }
  .hero-actions { display: flex; align-items: center; gap: 36px; margin-top: 38px; }
  .hero-proof { display: flex; gap: 28px; margin-top: 40px; color: #5e6059; font-size: 12px; font-weight: 650; }
  .hero-proof > span { display: flex; align-items: center; gap: 8px; }
  .hero-proof svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .hero-stage { position: relative; display: grid; min-height: 630px; perspective: 1200px; place-items: center; }
  .app-preview { position: relative; z-index: 2; width: min(790px, 100%); aspect-ratio: 1.18; overflow: hidden; color: #272821; background: #ebe8e0; border: 1px solid rgba(23,24,22,.16); border-radius: 21px; box-shadow: 0 60px 120px rgba(47,43,35,.22), 0 0 0 8px rgba(255,255,255,.35); transform: rotateY(-7deg) rotateX(2deg); transition: transform .25s ease-out; }
  .preview-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 9%; padding: 0 3%; background: rgba(255,255,255,.75); border-bottom: 1px solid var(--line); font-size: 10px; }
  .preview-logo { display: flex; align-items: center; gap: 5px; font-weight: 800; }
  .preview-logo span { display: block; width: 12px; height: 15px; border: 1.5px solid; }
  .preview-file { color: #777970; }
  .preview-status { display: flex; justify-content: flex-end; align-items: center; gap: 5px; color: #4e7e45; }
  .preview-status i { width: 5px; height: 5px; border-radius: 50%; background: #64a859; }
  .preview-body { display: grid; grid-template-columns: 15% 1fr 20%; height: 82%; }
  .preview-pages { display: flex; flex-direction: column; align-items: center; gap: 6%; padding-top: 24%; border-right: 1px solid var(--line); }
  .mini-page { position: relative; display: flex; flex-direction: column; gap: 6px; width: 57%; aspect-ratio: .72; padding: 22% 14%; background: white; border-radius: 2px; box-shadow: 0 3px 8px rgba(0,0,0,.09); }
  .mini-page.active { outline: 2px solid var(--violet); outline-offset: 2px; }
  .mini-page i { position: absolute; left: -16px; top: 40%; color: #777; font-size: 8px; font-style: normal; }
  .mini-page b { height: 2px; background: #d7d4ca; }
  .preview-canvas { display: grid; place-items: center; background: #c9c7c1; }
  .paper-card { position: relative; width: 68%; aspect-ratio: .72; padding: 10%; overflow: hidden; background: #fffdf9; box-shadow: 0 13px 35px rgba(0,0,0,.15); }
  .paper-kicker { font-size: 6px; font-weight: 800; letter-spacing: .15em; }
  .paper-card h3 { margin: 32% 0 7%; font-size: clamp(18px, 2.1vw, 36px); line-height: .89; letter-spacing: -.055em; }
  .paper-card h3 em { color: var(--coral); }
  .paper-card p { width: 80%; color: #696b64; font-size: clamp(5px, .58vw, 9px); }
  .paper-grid { position: absolute; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3,1fr); width: 100%; height: 18%; }
  .paper-grid span:nth-child(1) { background: var(--acid); }.paper-grid span:nth-child(2) { background: var(--violet); }.paper-grid span:nth-child(3) { background: var(--coral); }
  .selection-box { position: absolute; top: 48%; left: 8%; width: 84%; height: 14%; border: 1.5px solid var(--violet); }
  .selection-box i { position: absolute; width: 5px; height: 5px; background: white; border: 1px solid var(--violet); border-radius: 50%; }
  .selection-box i:nth-child(1){left:-3px;top:-3px}.selection-box i:nth-child(2){right:-3px;top:-3px}.selection-box i:nth-child(3){left:-3px;bottom:-3px}.selection-box i:nth-child(4){right:-3px;bottom:-3px}
  .selection-box span { position: absolute; top: -22px; left: 0; padding: 2px 5px; color: white; background: var(--violet); font-size: 7px; }
  .preview-panel { padding: 18% 12%; background: #f7f5f0; border-left: 1px solid var(--line); font-size: 8px; }
  .preview-panel small { display: block; margin-bottom: 26px; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
  .preview-panel label { display: block; margin: 14px 0 5px; color: #8b8d85; }
  .preview-panel > span { display: block; padding: 7px; background: white; border: 1px solid var(--line); border-radius: 5px; }
  .color-row { display: flex; align-items: center; gap: 6px; margin-top: 18px; }
  .color-row i { width: 18px; height: 18px; background: var(--ink); border-radius: 50%; }
  .preview-footer { display: flex; justify-content: space-between; align-items: center; height: 9%; padding: 0 3%; background: rgba(255,255,255,.78); border-top: 1px solid var(--line); color: #70716b; font-size: 8px; }
  .stage-orbit { position: absolute; border: 1px solid rgba(119,89,245,.25); border-radius: 50%; }
  .orbit-a { width: 94%; aspect-ratio: 1; transform: rotate(-14deg); }.orbit-b { width: 72%; aspect-ratio: 1; transform: rotate(26deg); }
  .floating-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 10px 14px; background: rgba(255,253,249,.88); border: 1px solid rgba(23,24,22,.12); border-radius: 999px; box-shadow: 0 14px 35px rgba(0,0,0,.12); backdrop-filter: blur(12px); font-size: 11px; font-weight: 700; animation: float 4s ease-in-out infinite; }
  .chip-a { top: 11%; left: -2%; }.chip-b { right: -1%; bottom: 12%; animation-delay: -2s; }
  .chip-icon { display: grid; width: 25px; height: 25px; place-items: center; color: white; background: var(--violet); border-radius: 50%; font-size: 10px; }.chip-b .chip-icon { color: var(--ink); background: var(--acid); }
  @keyframes float { 50% { transform: translateY(-10px) rotate(1deg); } }

  .marquee { overflow: hidden; padding: 18px 0; color: white; background: var(--ink); transform: rotate(-1.1deg) scale(1.02); }
  .marquee-track { display: flex; width: max-content; align-items: center; gap: 34px; animation: marquee 24s linear infinite; }
  .marquee span { font-size: 12px; font-weight: 800; letter-spacing: .16em; }.marquee i { color: var(--acid); font-style: normal; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  .tools-section { padding-top: 160px; }
  .tool-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
  .tool-card { position: relative; min-height: 510px; padding: 28px; overflow: hidden; background: #e9e5dc; border: 1px solid rgba(23,24,22,.08); border-radius: var(--radius); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s; }
  .tool-card:hover { z-index: 2; transform: translateY(-8px) rotate(-.3deg); box-shadow: var(--shadow); background: var(--white); }
  .tool-card.featured { grid-column: span 2; }
  .tool-card.wide-card { grid-column: span 2; }
  .tool-card.dark-card { color: white; background: var(--ink); }
  .tool-card.dark-card:hover { background: #242520; }
  .tool-number { color: #85877e; font-family: var(--serif); font-size: 13px; }
  .tool-badge { position: absolute; top: 24px; right: 24px; padding: 6px 10px; color: #46703e; background: rgba(216,255,98,.45); border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .dark-card .tool-badge { color: var(--acid); background: rgba(216,255,98,.12); }
  .tool-card h3 { position: absolute; left: 28px; bottom: 76px; margin: 0; font-size: 27px; letter-spacing: -.04em; }
  .tool-card p { position: absolute; left: 28px; bottom: 24px; width: calc(100% - 100px); margin: 0; color: #696b64; font-size: 13px; line-height: 1.45; }
  .dark-card p { color: rgba(255,255,255,.6); }
  .card-arrow { position: absolute; right: 25px; bottom: 25px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid currentColor; border-radius: 50%; transition: transform .25s, background .25s; }
  .tool-card:hover .card-arrow { background: var(--acid); color: var(--ink); transform: rotate(45deg); }
  .tool-visual { position: absolute; top: 75px; left: 28px; right: 28px; height: 245px; }
  .edit-visual { display: grid; place-items: center; }
  .text-block { width: 70%; height: 75%; background: white; box-shadow: 0 20px 40px rgba(0,0,0,.1); transform: rotate(-3deg); }
  .text-block::before, .text-block::after { content:""; position:absolute; left: 28%; width: 43%; height: 6px; background: #ccc9c0; box-shadow: 0 16px 0 #dedbd3, 0 32px 0 #dedbd3, 0 48px 0 #dedbd3; }
  .text-block::before { top: 38%; }.text-block::after { top: 30%; width: 25%; height: 11px; background: var(--ink); box-shadow: none; }
  .cursor-line { position: absolute; top: 48%; left: 38%; width: 45%; height: 46px; border: 2px solid var(--violet); }
  .floating-type { position: absolute; top: 27%; right: 14%; display: grid; width: 42px; height: 42px; place-items: center; color: white; background: var(--violet); border-radius: 50%; font-family: var(--serif); font-size: 23px; box-shadow: 0 12px 25px rgba(119,89,245,.3); }
  .organize-visual { display: flex; align-items: center; justify-content: center; gap: 10px; }
  .organize-visual span { display: grid; width: 28%; aspect-ratio: .72; place-items: end center; padding-bottom: 14px; background: white; box-shadow: 0 14px 25px rgba(0,0,0,.08); font-size: 10px; }
  .organize-visual span:nth-child(2) { transform: translateY(-18px) rotate(4deg); outline: 2px solid var(--coral); }
  .organize-visual i { position: absolute; color: var(--coral); font-style: normal; font-size: 24px; }
  .sign-visual { display: grid; place-items: center; }.sign-visual svg { width: 85%; }.sign-visual path { fill: none; stroke: var(--acid); stroke-width: 3; stroke-linecap: round; }
  .merge-visual { display: flex; align-items: center; justify-content: center; }
  .merge-visual span { width: 42%; height: 76%; background: white; box-shadow: 0 12px 30px rgba(0,0,0,.1); }.merge-visual span:first-child { transform: rotate(-6deg); }.merge-visual span:nth-child(2) { margin-left: -20%; transform: rotate(7deg); }
  .merge-visual b { position: absolute; display: grid; width: 48px; height: 48px; place-items: center; color: white; background: var(--coral); border-radius: 50%; font-size: 27px; }
  .export-visual { display: flex; align-items: center; justify-content: center; gap: 18px; }
  .export-visual span { padding: 23px 28px; background: white; border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.08); font-size: 13px; font-weight: 800; }.export-visual span:first-child { color: white; background: var(--coral); }.export-visual i { font-style: normal; }.export-visual span:last-child { transform: translateY(22px); }
  .form-visual { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 20px; background: white; box-shadow: 0 15px 30px rgba(0,0,0,.08); transform: rotate(2deg); }
  .form-visual span { height: 18px; border: 1px solid #cbc8c0; border-radius: 4px; }.form-visual i { position: absolute; right: 35px; bottom: 30px; display: grid; width: 38px; height: 38px; place-items: center; background: var(--acid); border-radius: 50%; font-style: normal; }
  .section-cta { display: flex; justify-content: center; margin-top: 48px; }

  .privacy-section { display: grid; grid-template-columns: 1fr 1.15fr; gap: 90px; color: white; background: var(--ink); }
  .privacy-sticky { position: sticky; top: 130px; align-self: start; }
  .privacy-sticky h2 { max-width: 660px; margin: 0 0 46px; font-size: clamp(50px, 5.8vw, 88px); line-height: .94; letter-spacing: -.06em; }
  .privacy-cards { display: flex; flex-direction: column; gap: 22px; }
  .privacy-card { position: relative; min-height: 390px; padding: 36px; color: var(--ink); background: #e6e2d9; border-radius: var(--radius); }
  .privacy-card:nth-child(2) { background: #cfc6ff; }.privacy-card:nth-child(3) { background: var(--acid); }
  .privacy-icon { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(23,24,22,.18); border-radius: 50%; }.privacy-icon svg { width: 26px; }
  .big-number { position: absolute; top: 25px; right: 32px; color: rgba(23,24,22,.18); font-family: var(--serif); font-size: 72px; font-style: italic; }
  .privacy-card h3 { margin: 145px 0 12px; font-size: 30px; letter-spacing: -.04em; }.privacy-card p { max-width: 500px; margin: 0; color: #585a54; font-size: 15px; }

  .workflow-section { background: var(--white); }
  .section-heading.compact { display: block; }
  .workflow-list { margin: 70px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
  .workflow-item { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; min-height: 175px; border-bottom: 1px solid var(--line); }
  .workflow-item > span { font-family: var(--serif); font-style: italic; font-size: 22px; }
  .workflow-item h3 { margin: 0 0 8px; font-size: 32px; letter-spacing: -.04em; }.workflow-item p { margin: 0; color: var(--ink-soft); }.workflow-item > i { display: grid; width: 58px; height: 58px; place-items: center; background: var(--paper); border-radius: 50%; font-size: 21px; font-style: normal; transition: transform .3s, background .3s; }.workflow-item:hover > i { background: var(--acid); transform: rotate(45deg); }

  .final-cta { display: flex; min-height: 720px; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #d6cbff; }
  .cta-star { display: grid; width: 60px; height: 60px; margin-bottom: 36px; place-items: center; background: var(--acid); border-radius: 50%; font-size: 28px; animation: spin-slow 12s linear infinite; }
  @keyframes spin-slow { to { transform: rotate(360deg); } }
  .final-cta > p:first-of-type { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .15em; }.final-cta h2 { margin: 30px 0 46px; font-size: clamp(62px, 8vw, 120px); line-height: .85; letter-spacing: -.07em; }.final-cta h2 em { color: var(--violet); }.microcopy { color: #615b79; font-size: 12px; }
  .site-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; padding: 70px max(5vw,30px) 35px; color: white; background: var(--ink); }.footer-brand { font-size: 32px; }.site-footer > p { margin: 0; color: rgba(255,255,255,.55); }.site-footer nav { display: flex; justify-content: flex-end; align-items: flex-start; gap: 26px; font-size: 12px; }.site-footer nav a:hover { color: var(--acid); }.copyright { grid-column: 1 / -1; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; }

  /* Studio */
  .studio-body { height: 100vh; overflow: hidden; background: #d8d7d2; }
  .studio-shell { display: grid; grid-template-rows: 58px 56px 1fr 34px; height: 100vh; }
  .studio-header { z-index: 5; display: grid; grid-template-columns: 260px 1fr auto; align-items: center; padding: 0 14px; background: rgba(250,249,246,.98); border-bottom: 1px solid var(--line); }
  .studio-brand { font-size: 17px; }.studio-brand .brand-mark { width: 25px; }
  .file-identity { text-align: center; line-height: 1.2; }.file-identity strong { display: block; font-size: 12px; }.file-identity span { color: #8b8c86; font-size: 10px; }
  .studio-header-actions { display: flex; align-items: center; gap: 4px; }
  .local-pill { display: flex; align-items: center; gap: 7px; margin-right: 9px; padding: 7px 10px; color: #477540; background: #eef6e9; border-radius: 999px; font-size: 10px; font-weight: 700; }.local-pill i { width: 6px; height: 6px; background: #62a256; border-radius: 50%; }
  .studio-toolbar { z-index: 4; display: flex; align-items: stretch; gap: 2px; padding: 5px 12px; background: #f7f6f2; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .tool-button { display: flex; min-width: 65px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: 9px; white-space: nowrap; }.tool-button:hover, .tool-button.active { background: #e8e5dc; }.tool-button.active { color: var(--violet); }.tool-button svg { width: 18px; height: 18px; }.tool-button kbd { position: absolute; margin: -24px 0 0 75px; color: #8b8c86; font-size: 8px; }.danger-hover:hover { color: #bb4435; }.toolbar-divider { width: 1px; margin: 7px 6px; background: var(--line); }.toolbar-spacer { flex: 1; }
  .tool-settings { display: flex; align-items: center; gap: 12px; min-width: max-content; margin: 0 7px; padding: 4px 11px; background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 5px 18px rgba(23,24,22,.08); }.tool-settings strong { font-size: 9px; }.tool-settings label { display: flex; align-items: center; gap: 6px; color: #6d6e68; font-size: 8px; }.tool-settings input[type="color"] { width: 25px; height: 25px; padding: 2px; border: 1px solid var(--line); background: white; border-radius: 50%; cursor: pointer; }.tool-settings input[type="range"] { width: 74px; accent-color: var(--violet); }.tool-settings output { min-width: 24px; color: var(--ink); font-variant-numeric: tabular-nums; }
  .studio-main { display: grid; grid-template-columns: 230px minmax(0,1fr) 265px; min-height: 0; }
  .left-panel, .right-panel { z-index: 2; display: flex; min-height: 0; flex-direction: column; background: #f4f3ef; }
  .left-panel { border-right: 1px solid var(--line); }.right-panel { border-left: 1px solid var(--line); }
  .panel-tabs { display: flex; height: 41px; border-bottom: 1px solid var(--line); }.panel-tabs button { flex: 1; border: 0; border-bottom: 2px solid transparent; color: #73756f; background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }.panel-tabs button.active { color: var(--ink); border-color: var(--ink); }
  .thumbnail-list { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 18px; overflow-y: auto; }
  .thumbnail-item { position: relative; display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 8px; cursor: grab; }.thumbnail-item.dragging { opacity: .4; }.thumbnail-item.drag-over .thumb-canvas-wrap { outline: 3px solid var(--coral); }.thumbnail-item.selected .thumb-canvas-wrap { outline: 2px solid var(--violet); outline-offset: 2px; }.thumbnail-item > span { color: #80817b; text-align: center; font-size: 9px; }.thumb-canvas-wrap { position: relative; display: grid; min-height: 130px; place-items: center; overflow: hidden; background: white; border-radius: 3px; box-shadow: 0 3px 10px rgba(0,0,0,.1); }.thumb-canvas-wrap canvas { width: 100%; height: auto; }.thumb-rotation { position: absolute; right: 4px; bottom: 4px; padding: 2px 4px; color: white; background: rgba(23,24,22,.75); border-radius: 4px; font-size: 8px; }
  .add-page-button { margin: 12px; padding: 10px; border: 1px dashed #aaa9a2; color: #666760; background: transparent; border-radius: 9px; font-size: 10px; cursor: pointer; }.add-page-button:hover { background: white; }.add-page-button[disabled] { opacity: .4; cursor: not-allowed; }
  .document-area { position: relative; min-width: 0; min-height: 0; overflow: auto; background: #cac9c4; }
  .document-area::before { content:""; position: fixed; inset: 114px 265px 34px 230px; pointer-events: none; background-image: radial-gradient(rgba(23,24,22,.08) 1px,transparent 1px); background-size: 18px 18px; opacity: .4; }
  .welcome-state { position: relative; z-index: 1; display: flex; width: 100%; min-height: 100%; flex-direction: column; align-items: center; justify-content: center; padding: 45px; text-align: center; }.welcome-state h1 { margin: 24px 0 18px; font-size: clamp(50px,5vw,78px); line-height: .88; letter-spacing: -.065em; }.welcome-state h1 em { color: var(--violet); }.welcome-state > p { max-width: 530px; margin: 0; color: #61625d; }.welcome-actions { display: flex; gap: 10px; margin-top: 28px; }.drop-hint { margin-top: 18px !important; font-size: 10px; }.welcome-art { position: relative; width: 180px; height: 155px; margin-bottom: 15px; }.welcome-sheet { position: absolute; left: 42px; top: 8px; width: 96px; height: 128px; background: white; border-radius: 4px; box-shadow: 0 12px 28px rgba(0,0,0,.13); }.sheet-back { transform: rotate(-13deg); background: var(--acid); }.sheet-mid { transform: rotate(10deg); background: #cfc6ff; }.sheet-front { display: flex; flex-direction: column; gap: 8px; padding: 23px 17px; }.sheet-front i { height: 4px; background: #ddd9cf; }.sheet-front i:first-child { width: 60%; height: 8px; background: var(--ink); }.sheet-front b { margin-top: 17px; color: var(--coral); font-size: 19px; }.welcome-spark { position: absolute; right: 5px; top: 2px; display: grid; width: 42px; height: 42px; place-items: center; background: var(--coral); border-radius: 50%; font-size: 21px; }
  .loading-state { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(244,242,237,.93); }.loading-state[hidden] { display: none; }.loader-ring { width: 44px; height: 44px; border: 3px solid #dad7cf; border-top-color: var(--violet); border-radius: 50%; animation: spin .8s linear infinite; }@keyframes spin{to{transform:rotate(360deg)}}.loading-state strong { font-size: 14px; }.loading-state span { color: #777970; font-size: 11px; }
  .page-stage { position: relative; z-index: 1; display: flex; min-height: 100%; align-items: flex-start; justify-content: center; padding: 54px; }.page-stage[hidden] { display: none; }.page-wrap { position: relative; line-height: 0; box-shadow: 0 18px 50px rgba(0,0,0,.2); background:white; isolation:isolate; }.page-wrap canvas { max-width: none; }.page-wrap #pdfCanvas { position:relative; z-index:0; }.page-wrap #annotationCanvas { position: absolute; inset: 0; z-index: 3; touch-action: none; }.page-wrap.text-mode #annotationCanvas { pointer-events: none; }
  .pdf-text-layer { position:absolute; inset:0; z-index:2; overflow:clip; color:transparent; line-height:1; text-align:initial; text-size-adjust:none; transform-origin:0 0; pointer-events:none; forced-color-adjust:none; }.pdf-text-layer :is(span,br) { position:absolute; color:transparent; white-space:pre; transform-origin:0 0; cursor:text; }.pdf-text-layer.text-edit-mode { pointer-events:auto; }.pdf-text-layer.text-edit-mode span { pointer-events:auto; border-radius:2px; }.pdf-text-layer.text-edit-mode span:hover { outline:1px solid rgba(119,89,245,.7); background:rgba(119,89,245,.06); }.pdf-text-layer ::selection { color:transparent; background:rgba(119,89,245,.28); }
  .interaction-layer { position:absolute; inset:0; z-index:4; pointer-events:none; line-height:1.2; }.inline-text-editor { position:absolute; display:block; min-width:20px; padding:1px 2px; border:0; outline:1px solid rgba(119,89,245,.85); outline-offset:1px; border-radius:2px; white-space:pre-wrap; overflow-wrap:normal; color:var(--ink); caret-color:var(--violet); cursor:text; pointer-events:auto; box-shadow:0 0 0 3px rgba(119,89,245,.11); }.inline-text-editor.new-text { background:rgba(255,255,255,.82); }.inline-text-editor:focus { outline:2px solid var(--violet); }
  .signature-placement { position:absolute; z-index:2; min-width:70px; min-height:34px; padding:5px; border:2px solid var(--violet); background:rgba(255,255,255,.1); cursor:move; pointer-events:auto; box-shadow:0 8px 24px rgba(23,24,22,.16); }.signature-placement img { width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; }.signature-placement .resize-handle { position:absolute; right:-9px; bottom:-9px; width:18px; height:18px; padding:0; border:2px solid white; background:var(--violet); border-radius:50%; cursor:nwse-resize; }.signature-actions { position:absolute; left:50%; top:calc(100% + 12px); display:flex; gap:6px; padding:5px; background:var(--ink); border-radius:999px; transform:translateX(-50%); box-shadow:0 8px 24px rgba(0,0,0,.22); white-space:nowrap; }.signature-actions button { padding:6px 10px; border:0; color:white; background:transparent; border-radius:999px; cursor:pointer; font-size:9px; }.signature-actions button:first-child { color:var(--ink); background:var(--acid); }
  .drop-overlay { position: absolute; inset: 16px; z-index: 20; display: grid; place-items: center; color: white; background: rgba(23,24,22,.92); border: 2px dashed var(--acid); border-radius: 18px; text-align: center; }.drop-overlay[hidden] { display: none; }.drop-overlay span { display: grid; width: 70px; height: 70px; margin: 0 auto 18px; place-items: center; color: var(--ink); background: var(--acid); border-radius: 50%; font-size: 33px; }.drop-overlay strong { font-size: 28px; }.drop-overlay p { color: rgba(255,255,255,.6); }
  .properties-head { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); font-size: 11px; }.panel-close { display:none; }.properties-content { overflow-y: auto; }.property-section { padding: 17px 15px; border-bottom: 1px solid var(--line); }.property-section h3 { margin: 0 0 14px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }.document-stats { margin:0; }.document-stats div { display: flex; justify-content: space-between; margin: 9px 0; font-size: 10px; }.document-stats dt { color: #777970; }.document-stats dd { margin:0; }.status-good { color:#4b7d43; }.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.quick-grid button { display:flex; min-height:66px; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:10px; border:1px solid var(--line); background:white; border-radius:8px; cursor:pointer; font-size:9px; text-align:left; }.quick-grid button:hover { border-color: var(--violet); }.quick-grid button span { font-family:var(--serif); font-size:19px; }.privacy-note { display:grid; grid-template-columns:24px 1fr; gap:8px; color:#656760; font-size:9px; line-height:1.45; }.privacy-note svg{width:21px}.text-danger { padding:0; border:0; color:#ad4035; background:transparent; font-size:9px; text-decoration:underline; cursor:pointer; }
  .studio-statusbar { z-index:4; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 13px; background:#f8f7f4; border-top:1px solid var(--line); color:#6e6f69; font-size:9px; }.studio-statusbar > span:last-child { text-align:right; }.zoom-controls { display:flex; align-items:center; gap:4px; }.zoom-controls button { height:24px; min-width:25px; border:0; background:transparent; border-radius:5px; cursor:pointer; font-size:10px; }.zoom-controls button:hover { background:#e8e5dc; }.zoom-controls span { width:42px; text-align:center; }
  .flow-dialog, .command-palette { width:min(520px,calc(100vw - 32px)); padding:0; border:0; border-radius:18px; box-shadow:0 30px 100px rgba(0,0,0,.28); }.flow-dialog::backdrop,.command-palette::backdrop{background:rgba(23,24,22,.54);backdrop-filter:blur(5px)}.flow-dialog form{margin:0}.dialog-head{display:flex;justify-content:space-between;padding:25px 25px 15px}.dialog-kicker{color:var(--violet);font-size:9px;font-weight:800;letter-spacing:.14em}.dialog-head h2{margin:5px 0 0;font-size:27px;letter-spacing:-.04em}.dialog-close{width:35px;height:35px;border:0;background:#f1efe9;border-radius:50%;font-size:23px;cursor:pointer}.dialog-body{padding:10px 25px 25px}.dialog-body label{display:block;margin-bottom:14px;color:#686a63;font-size:10px;font-weight:700}.dialog-body input,.dialog-body textarea,.dialog-body select{width:100%;margin-top:6px;padding:11px;border:1px solid var(--line);border-radius:8px;background:#faf9f6}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:18px 25px;background:#f5f3ed;border-top:1px solid var(--line)}.dialog-note{padding:10px 12px;color:#6c6448;background:#fff5cf;border-radius:8px;font-size:10px}.signature-dialog{width:min(700px,calc(100vw - 32px))}.signature-dialog canvas{width:100%;height:auto;border:1px dashed #aaa79f;border-radius:10px;touch-action:none}.clear-signature{margin-top:8px;padding:0;border:0;background:transparent;color:#777;text-decoration:underline;cursor:pointer;font-size:10px}.signature-tabs{display:flex;gap:5px;padding:0 25px 18px;border-bottom:1px solid var(--line)}.signature-tabs button{padding:9px 13px;border:1px solid var(--line);background:white;border-radius:999px;cursor:pointer;font-size:10px;font-weight:700}.signature-tabs button.active{color:white;background:var(--ink);border-color:var(--ink)}.certificate-privacy{margin:8px 0 0;color:#65725e;font-size:9px}.signature-panel{min-height:285px}
  .command-palette{top:12vh;align-self:start}.command-palette form{padding:0}.command-palette label{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--line)}.command-palette label svg{width:23px}.command-palette input{width:100%;border:0;outline:0;background:transparent;font-size:17px}.command-results{max-height:360px;overflow:auto;padding:7px}.command-result{display:flex;width:100%;align-items:center;justify-content:space-between;padding:12px;border:0;background:transparent;border-radius:8px;cursor:pointer;text-align:left}.command-result:hover,.command-result.active{background:#eeece6}.command-result span{display:flex;align-items:center;gap:10px}.command-result i{display:grid;width:29px;height:29px;place-items:center;background:white;border:1px solid var(--line);border-radius:7px;font-style:normal}.command-result small{color:#8b8c86}.command-palette form>p{display:flex;gap:14px;margin:0;padding:10px 16px;color:#8b8c86;background:#f5f3ed;font-size:8px}.toast-region{position:fixed;z-index:200;right:20px;bottom:50px;display:flex;flex-direction:column;gap:8px}.toast{display:flex;align-items:center;gap:10px;min-width:260px;padding:13px 15px;color:white;background:var(--ink);border-radius:10px;box-shadow:0 15px 35px rgba(0,0,0,.2);font-size:11px;animation:toastIn .3s ease}.toast.success::before{content:"✓";display:grid;width:22px;height:22px;place-items:center;color:var(--ink);background:var(--acid);border-radius:50%}.toast.error::before{content:"!";display:grid;width:22px;height:22px;place-items:center;background:var(--coral);border-radius:50%}@keyframes toastIn{from{opacity:0;transform:translateY(10px)}}

  /* Simple pages */
  .simple-page { min-height:100vh; background:var(--paper); }.tool-landing,.error-page { display:flex; min-height:calc(100vh - 82px); flex-direction:column; align-items:center; justify-content:center; padding:60px 25px; text-align:center; background:radial-gradient(circle at 70% 25%,#d9d0ff 0,transparent 35%),radial-gradient(circle at 25% 70%,#e3ff91 0,transparent 32%); }.tool-landing h1,.error-page h1{max-width:900px;margin:18px 0;font-size:clamp(55px,8vw,110px);line-height:.9;letter-spacing:-.07em}.tool-landing>p,.error-page p{max-width:560px;margin:0 0 35px;color:var(--ink-soft);font-size:18px}.tool-privacy-strip{display:flex;gap:25px;margin-top:60px;color:#5d5f58;font-size:11px}.error-page>span{font-family:var(--serif);font-size:80px;color:var(--coral)}
  .legal-page{max-width:900px;margin:0 auto;padding:110px 30px 150px}.legal-page h1{margin:20px 0 35px;font-size:clamp(58px,8vw,105px);line-height:.9;letter-spacing:-.07em}.legal-lead{font-size:23px!important;line-height:1.5!important}.legal-page h2{margin:70px 0 15px;font-size:28px;letter-spacing:-.04em}.legal-page p{max-width:720px;color:var(--ink-soft);font-size:16px;line-height:1.75}.status-list{margin:60px 0;border-top:1px solid var(--line)}.status-list p{display:grid;grid-template-columns:15px 1fr auto;align-items:center;max-width:none;margin:0;padding:20px 0;border-bottom:1px solid var(--line)}.status-list i{width:8px;height:8px;background:#64a859;border-radius:50%;box-shadow:0 0 0 5px rgba(100,168,89,.12)}.status-list span{font-size:12px}.status-list .status-muted i{background:#b4a44a}.status-list .status-muted span{color:#8a7a2e}
}

@layer responsive {
  @media (max-width: 1100px) {
    .hero { grid-template-columns: 1fr; padding-top: 90px; }.hero-copy { max-width: 850px; }.hero-stage { min-height: 590px; }.app-preview { width: min(760px,90%); }.tool-grid { grid-template-columns: repeat(2,1fr); }.tool-card.featured,.tool-card.wide-card{grid-column:span 1}.privacy-section{gap:50px}.studio-main{grid-template-columns:190px minmax(0,1fr) 230px}.document-area::before{inset:114px 230px 34px 190px}.studio-header{grid-template-columns:190px 1fr auto}.local-pill{display:none}
  }
  @media (max-width: 780px) {
    .section{padding:90px 20px}.site-header{grid-template-columns:1fr auto;padding:0 18px;min-height:70px}.site-nav{display:none}.header-actions{gap:4px}.header-actions .button{min-width:42px;padding:0 13px}.hero{min-height:auto;padding:80px 20px 70px;gap:25px}.hero-copy h1{font-size:clamp(58px,17vw,88px)}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.hero-proof{align-items:flex-start;flex-direction:column;gap:10px}.hero-stage{min-height:390px;margin:15px -10px 0}.app-preview{width:100%;border-radius:13px;transform:none}.floating-chip{display:none}.section-heading{display:block}.section-heading h2{margin:20px 0 28px;font-size:58px}.section-heading p{font-size:16px}.tool-grid{grid-template-columns:1fr}.tool-card{min-height:460px}.tool-card.featured,.tool-card.wide-card{grid-column:auto}.privacy-section{grid-template-columns:1fr}.privacy-sticky{position:relative;top:auto}.privacy-sticky h2{font-size:54px}.privacy-card{min-height:350px}.workflow-item{grid-template-columns:55px 1fr auto;min-height:145px}.workflow-item h3{font-size:24px}.workflow-item p{font-size:13px}.workflow-item>i{width:44px;height:44px}.final-cta{min-height:620px}.site-footer{grid-template-columns:1fr}.site-footer nav{justify-content:flex-start;flex-wrap:wrap}.copyright{grid-column:auto}.studio-shell{grid-template-rows:54px 52px 1fr 32px}.studio-header{grid-template-columns:1fr auto;padding:0 8px}.studio-brand span{display:none}.file-identity{text-align:left}.studio-header-actions .icon-button{display:none}.studio-header-actions .button{min-width:42px;padding:0 12px;font-size:0}.studio-header-actions .button span{font-size:15px}.studio-main{grid-template-columns:72px minmax(0,1fr)}.right-panel{position:fixed;z-index:20;top:106px;right:0;bottom:32px;width:270px;transform:translateX(100%);transition:transform .25s;box-shadow:-15px 0 40px rgba(0,0,0,.15)}.right-panel.open{transform:none}.panel-close{display:grid}.left-panel{width:72px}.panel-tabs button{font-size:0}.panel-tabs button:first-child::after{content:"Pág.";font-size:9px}.thumbnail-list{gap:10px;padding:10px 6px}.thumbnail-item{display:block}.thumbnail-item>span{display:block;margin-bottom:4px}.thumb-canvas-wrap{min-height:70px}.add-page-button{margin:6px;padding:8px 3px;font-size:0}.add-page-button span{font-size:16px}.document-area::before{inset:106px 0 32px 72px}.page-stage{padding:25px 12px}.welcome-state{padding:20px}.welcome-art{transform:scale(.75);margin-bottom:-10px}.welcome-state h1{font-size:52px}.welcome-actions{width:100%;flex-direction:column}.welcome-actions .button{width:100%}.drop-hint{display:none}.tool-button{min-width:53px;padding:4px 7px}.tool-button span{display:none}.toolbar-divider{margin:7px 2px}.toolbar-spacer{display:none}.studio-toolbar{gap:1px;padding:4px}.studio-statusbar{grid-template-columns:1fr auto}.studio-statusbar>span:last-child{display:none}.local-pill{display:none}.file-identity strong{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tool-privacy-strip{flex-direction:column;gap:8px}.tool-landing h1{font-size:60px}
  }
  @media (prefers-reduced-motion: reduce) {
    *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}
  }
}