@layer portal {
  :root { --ink: #171c31; --forest: #171c31; --muted: #6b7183; --line: #e3e5eb; --lime: #c9f5d9; --violet: #7154e7; --mint: #d1f5e3; background: #f7f8fb; color: var(--ink); }
  body { background: #f7f8fb; }
  .portal-topbar { height: 78px; padding: 0 max(28px, calc((100vw - 1280px)/2)); gap: 50px; background: #fbfcfded; border-bottom: 1px solid #e4e7ef; position: relative; z-index: 30; }
  .brand { color: #171c31; font-size: 26px; letter-spacing: -1.5px; gap: 10px; }
  .brand-icon { background: #171c31; color: #c4f2d7; border-radius: 11px; transform: rotate(-7deg); width: 36px; height: 40px; box-shadow: 3px 3px 0 #c3f1d5; }
  .brand-light { font-weight: 450; }
  .brand-dot { color: #7154e7; }
  .portal-nav { display: flex; gap: 10px; align-self: stretch; align-items: center; }
  .portal-nav > button { display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 9px; color: #6a7081; font-size: 13px; font-weight: 550; min-height: 42px; }
  .portal-nav > button:hover, .portal-nav > button.active { color: #171c31; background: #edf0f5; }
  .nav-new { font-size: 9px; padding: 3px 5px; background: #e9e4fe; color: #7154e7; border-radius: 4px; }
  .top-actions { gap: 18px; }
  .preview-label { display: inline-flex; align-items: center; gap: 7px; color: #687181; font-size: 11px; white-space: nowrap; }
  .preview-label i, .tag-dot { width: 6px; height: 6px; border-radius: 50%; background: #26a47b; display: inline-block; }
  .button { min-height: 46px; border-radius: 10px; font-size: 13px; padding: 0 18px; }
  .button-primary { background: #171c31; color: #fff; box-shadow: 0 4px 12px #171c3110; }
  .button-primary:hover:not(:disabled) { background: #303957; box-shadow: 0 6px 16px #171c3120; }
  .button-secondary { background: #fff; border-color: #dce1e9; color: #4b546a; }
  .button-secondary:hover:not(:disabled) { background: #f4f5fa; border-color: #bcc5d6; }
  .icon-button { color: #737b8d; }
  .icon-button:hover:not(:disabled) { background: #edf0f7; color: #171c31; }
  :focus-visible { outline-color: #8c75ed; }
  ::selection { background: #dcd4ff; color: #171c31; }
  .portal-home { max-width: 1280px; padding: 0 28px; margin: auto; overflow-x: clip; }
  .portal-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; padding: 74px 0 70px; min-height: 660px; align-items: center; }
  .portal-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: 1.7px; color: #788092; }
  .portal-kicker > span { width: 5px; height: 5px; border-radius: 50%; background: #8d76dd; }
  .hero-copy h1 { margin: 24px 0 24px; font-size: clamp(56px, 6.2vw, 82px); font-weight: 550; line-height: .99; letter-spacing: -4.8px; }
  .hero-copy h1 em, .pricing-intro h1 em { font-style: normal; color: #7154e7; }
  .hero-copy > p { color: #737b8b; font-size: 16px; max-width: 430px; line-height: 1.75; }
  .hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
  .hero-actions .button { min-height: 52px; font-size: 13px; gap: 10px; }
  .hero-secondary { color: #414961; background: transparent; padding: 0 8px; }
  .hero-secondary:hover { background: #eef0f6; }
  .hero-privacy { display: flex; align-items: center; gap: 7px; color: #8a93a2; font-size: 11px; margin-top: 22px; }
  .hero-privacy svg { width: 14px; height: 14px; color: #91aa9a; }
  .hero-stage { min-height: 490px; position: relative; isolation: isolate; background: radial-gradient(ellipse at 53% 51%, #e5e0ff 0, #eef0f9 44%, transparent 70%); }
  .stage-orbit { position: absolute; width: 390px; height: 390px; border: 1px solid #dce0ec; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-20deg); z-index: -1; }
  .orbit-two { width: 490px; height: 300px; transform: translate(-50%, -50%) rotate(35deg); border-style: dashed; border-color: #e1e2ec; }
  .stage-tag { position: absolute; top: 1px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; white-space: nowrap; padding: 10px 13px; font-size: 8px; font-weight: 600; letter-spacing: 1px; border: 1px solid #e5e7ee; border-radius: 30px; background: #fff9; color: #8b91a0; }
  .hero-document { position: absolute; display: flex; flex-direction: column; text-align: left; border-radius: 11px; box-shadow: 0 20px 50px #30324e17, 0 3px 8px #30324e08; border: 1px solid #e4e6ee; transition: transform .25s, box-shadow .25s; }
  .document-front { top: 60px; left: 15%; width: 247px; height: 341px; background: #fff; transform: rotate(-9deg); padding: 23px 24px; z-index: 2; }
  .document-front:hover { transform: rotate(-5deg) translateY(-5px); box-shadow: 0 25px 60px #30324e25; }
  .paper-eyebrow { font-size: 6px; letter-spacing: 1.1px; color: #9a9dac; }
  .cv-monogram { display: grid; place-items: center; position: absolute; right: 22px; top: 38px; width: 38px; height: 38px; border-radius: 50%; background: #e7e4f9; color: #7762c1; font-size: 12px; font-weight: 650; }
  .cv-name { margin-top: 28px; font: 500 33px/1.02 Georgia, serif; letter-spacing: -1px; color: #2d2948; }
  .cv-role { margin-top: 9px; font-size: 6px; letter-spacing: 1.2px; color: #8c879e; }
  .paper-rule { margin-top: 20px; height: 1px; width: 100%; background: #d5cee7; }
  .paper-small-title { font-size: 6px; font-weight: 700; letter-spacing: .7px; margin: 16px 0 9px; color: #686079; }
  .paper-line { width: 85%; height: 3px; border-radius: 4px; background: #e8e9ed; margin-bottom: 5px; }
  .paper-line.long { width: 100%; }.paper-line.short { width: 60%; }
  .paper-footer { display: flex; justify-content: space-between; margin-top: auto; padding-top: 10px; font-size: 7px; letter-spacing: 1px; color: #8e93a4; width: 100%; }
  .paper-footer > span { font-size: 15px; line-height: 1; color: #4c4b68; }
  .document-back { right: 2%; top: 102px; width: 216px; height: 295px; padding: 20px; transform: rotate(13deg); background: #e1eee7; border-color: #d4e3d9; }
  .document-back:hover { transform: rotate(17deg) translateY(-4px); }
  .mini-file-icon { font-size: 7px; font-weight: 700; padding: 4px 6px; background: #fff9; color: #6d8b79; border-radius: 4px; align-self: flex-end; }
  .mini-photo { height: 100px; width: 100%; margin-top: 13px; border-radius: 5px; position: relative; overflow: hidden; background: #c3d9c9; }
  .mini-photo span { position: absolute; left: 25px; top: 15px; width: 26px; height: 26px; border-radius: 50%; background: #f2e6ba; }
  .mini-photo::after, .mini-photo i { content: ''; position: absolute; width: 135px; height: 90px; bottom: -43px; right: -2px; background: #809d8b; transform: rotate(35deg); border-radius: 10px; }
  .mini-photo i { right: 57px; bottom: -57px; background: #9cb6a4; transform: rotate(45deg); }
  .document-back > strong { font: 400 19px/1.2 Georgia, serif; letter-spacing: -.4px; color: #496858; margin-top: 18px; }
  .stage-pill { display: flex; align-items: center; gap: 9px; padding: 12px 17px; border: 1px solid #e3e6ec; border-radius: 13px; box-shadow: 0 6px 20px #30324e09; background: #ffffffed; position: absolute; z-index: 4; font-size: 11px; color: #667083; }
  .stage-pill svg { width: 16px; height: 16px; color: #8064ce; }
  .pill-edit { top: 104px; right: -2px; transform: rotate(4deg); }.pill-ready { left: 12%; bottom: 20px; transform: rotate(-3deg); }
  .pill-ready svg { color: #3a9b77; }
  .restore-banner { max-width: none; margin: 0 0 25px; background: #e9e4ff; border-color: #d9d1f8; color: #665486; }
  .tools-section { padding: 45px 0 65px; border-top: 1px solid #e2e6ef; }
  .section-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
  .section-intro h2 { margin-top: 13px; font-size: clamp(29px, 3.5vw, 40px); line-height: 1.15; letter-spacing: -1.6px; font-weight: 520; }
  .section-intro > p { color: #828b9b; font-size: 13px; line-height: 1.7; }
  .tool-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .portal-tool-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 24px; min-height: 235px; background: #fff; border: 1px solid #e5e7ee; border-radius: 16px; box-shadow: 0 3px 12px #171c3102; transition: transform .2s, box-shadow .2s, border-color .2s; }
  .portal-tool-card:hover { transform: translateY(-5px); border-color: #beb1ed; box-shadow: 0 12px 28px #45377b0c; }
  .portal-tool-icon { width: 44px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
  .portal-tool-icon svg { width: 21px; height: 21px; }
  .tone-violet { background: #eeebff; color: #8061df; }.tone-blue { background: #e7effc; color: #658bc7; }.tone-peach { background: #f9eae3; color: #c38b6c; }.tone-mint { background: #e4f3eb; color: #6c9e83; }
  .tool-card-title { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 5px; font-size: 16px; font-weight: 650; letter-spacing: -.4px; }
  .tool-card-title > span { color: #aeb4c2; font-weight: 400; font-size: 20px; }
  .portal-tool-card > p { font-size: 12px; line-height: 1.7; color: #8a92a0; margin-top: 11px; }
  .tool-card-foot { font-size: 7px; letter-spacing: .9px; color: #adb2be; margin-top: auto; padding-top: 22px; }
  .demo-link { font-size: 12px; min-height: 44px; color: #8d94a4; }
  .demo-link strong { color: #7e69bd; border-color: #d9cfed; }
  .portal-models { padding: 50px 0 70px; }
  .text-link { display: inline-flex; align-items: center; gap: 10px; color: #6a54ac; font-size: 12px; padding: 10px 0; min-height: 44px; }
  .text-link svg { width: 16px; height: 16px; }
  .model-showcase { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
  .model-feature { text-align: left; border-top: 1px solid #d9dfe9; padding: 18px 0 0; display: flex; flex-direction: column; align-items: flex-start; }
  .model-number { font-size: 9px; letter-spacing: 1.3px; color: #9a9faf; }
  .model-art { width: 100%; height: 210px; margin: 18px 0 22px; border-radius: 13px; padding: 28px; position: relative; overflow: hidden; transition: transform .2s; }
  .model-feature:hover .model-art { transform: translateY(-4px); }
  .art-cv { background: #ece9f7; }.art-contract { background: #dfeee7; }.art-receipt { background: #f4e9df; }
  .art-title { display: block; font-size: 25px; line-height: 1.2; letter-spacing: -.9px; font-weight: 500; color: #60567e; }
  .art-bar { display: block; height: 2px; width: 80%; background: #c8bfdd; margin-top: 18px; }
  .model-art i { display: block; height: 3px; background: #d4cde4; margin-top: 9px; width: 75%; border-radius: 4px; }.model-art i:nth-last-child(1) { width: 50%; }
  .art-contract .art-title { color: #4c7461; }.contract-lines { position: absolute; width: 260px; height: 90px; border: 1px solid #c0d8cb; bottom: -20px; right: -30px; transform: rotate(-13deg); background: repeating-linear-gradient(transparent, transparent 11px, #c7ddd1 12px, transparent 13px); }
  .art-sign { position: absolute; bottom: 25px; left: 30px; color: #658f78; font: italic 25px Georgia, serif; transform: rotate(-7deg); }
  .receipt-stamp { display: inline-block; padding: 5px 10px; border: 1px solid #b49b84; color: #ae9279; font-size: 9px; letter-spacing: 2px; transform: rotate(-8deg); border-radius: 4px; }
  .receipt-amount { display: block; margin-top: 18px; font-size: 36px; font-weight: 500; color: #9b7d66; letter-spacing: -1px; }
  .art-receipt .art-bar { background: #d8c4b3; }.art-receipt i { background: #e0cfc0; }
  .model-feature h3 { font-size: 21px; letter-spacing: -.6px; font-weight: 550; }.model-feature > p { font-size: 13px; line-height: 1.75; color: #8b92a1; max-width: 310px; margin-top: 9px; }.model-action { font-size: 11px; color: #726582; margin-top: 18px; }
  .portal-promise { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; padding: 52px 60px; background: #171d31; color: #fff; border-radius: 24px; margin: 32px 0 70px; overflow: hidden; }
  .portal-promise .portal-kicker { color: #8b96b3; }.portal-promise h2 { font-size: 40px; letter-spacing: -1.8px; line-height: 1.1; margin: 15px 0 20px; font-weight: 450; }.portal-promise p { font-size: 13px; color: #97a0b8; line-height: 1.8; max-width: 390px; }.portal-promise .button { background: #c5f2d8; color: #2a5142; margin-top: 24px; box-shadow: none; }
  .promise-steps { display: flex; flex-direction: column; gap: 20px; justify-content: center; }.promise-steps > div { padding-left: 44px; position: relative; }.promise-steps > div > span { position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #424d68; border-radius: 8px; font-size: 9px; color: #8a97b2; }.promise-steps strong { font-size: 14px; font-weight: 500; }.promise-steps p { font-size: 12px; margin-top: 5px; }
  .portal-footer { padding: 26px 0 32px; border-top: 1px solid #e1e5ed; display: flex; align-items: center; gap: 25px; }.portal-footer .brand { font-size: 22px; gap: 0; }.portal-footer p { font-size: 11px; color: #9299a8; }.portal-footer > span { font-size: 10px; margin-left: auto; color: #a7adbb; }
  .portal-workspace { max-width: 1280px; margin: auto; padding: 36px 28px 65px; min-height: calc(100dvh - 78px); }
  .portal-pricing { max-width: 1080px; margin: auto; padding: 65px 28px 80px; }
  .pricing-intro { text-align: center; }.pricing-intro h1 { font-size: 54px; letter-spacing: -2.5px; font-weight: 500; line-height: 1.15; margin: 20px 0; }.pricing-intro p { font-size: 15px; color: #7c8596; line-height: 1.7; }.pricing-disclaimer { display: inline-flex; align-items: center; gap: 9px; margin: 24px auto; padding: 11px 16px; border: 1px solid #ded6f7; border-radius: 10px; background: #f0ecfb; color: #817299; font-size: 12px; text-align: left; line-height: 1.6; }.pricing-disclaimer svg { width: 17px; height: 17px; }
  .pricing-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; margin-top: 24px; }.pricing-single { border: 1px solid #e0e4ec; border-radius: 20px; padding: 35px; background: #fff; }.pricing-single h2 { font-size: 26px; font-weight: 500; letter-spacing: -1px; margin-top: 14px; }.price-rows { margin: 20px 0; }.price-rows > div { padding: 17px 0; border-bottom: 1px solid #edf0f5; display: flex; align-items: center; gap: 16px; justify-content: space-between; }.price-rows strong { font-size: 14px; font-weight: 550; }.price-rows small { display: block; color: #9ba2af; font-size: 11px; line-height: 1.6; margin-top: 5px; }.price-rows b { font-size: 18px; font-weight: 550; white-space: nowrap; }.pricing-single > p { font-size: 12px; color: #929aaa; line-height: 1.8; margin: 22px 0; }
  .pricing-plan { border-radius: 20px; padding: 35px; background: #1c2239; color: #fff; box-shadow: 0 10px 25px #1c223915; }.plan-badge { font-size: 9px; letter-spacing: 1.5px; color: #a19bc6; }.pricing-plan h2 { font-size: 28px; font-weight: 500; margin: 25px 0 12px; letter-spacing: -1px; }.plan-price { display: flex; align-items: baseline; gap: 10px; }.plan-price strong { font-size: 44px; letter-spacing: -2px; font-weight: 450; }.plan-price span { font-size: 13px; color: #8e98b4; }.pricing-plan > p { color: #a2acc5; font-size: 13px; line-height: 1.7; margin-top: 15px; }.pricing-plan ul { list-style: none; padding: 26px 0 16px; margin: 0; display: grid; gap: 16px; font-size: 12px; color: #bbc4da; }.pricing-plan li::before { content: '✓'; color: #a2dfbd; margin-right: 10px; }.plan-pending { border: 1px solid #3a425b; border-radius: 10px; display: flex; align-items: center; gap: 10px; padding: 14px; font-size: 11px; line-height: 1.6; color: #b1bbd2; margin-top: 18px; }.plan-pending svg { width: 17px; height: 17px; }
  .pricing-faq { margin: 70px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }.pricing-faq h2 { grid-column: 1/-1; font-size: 28px; font-weight: 500; letter-spacing: -1px; }.pricing-faq h3 { font-size: 14px; font-weight: 550; margin-bottom: 10px; }.pricing-faq p { font-size: 13px; line-height: 1.8; color: #8790a2; }
  .download-preview-dialog { width: min(480px,calc(100vw - 28px)); border-radius: 20px; background: #fff; padding: 27px; color: #171c31; }.download-dialog-top { display: flex; align-items: center; justify-content: space-between; }.download-dialog-icon { display: grid; place-items: center; width: 52px; height: 54px; border-radius: 15px; background: #e7f5ee; color: #719c86; margin: 12px 0 22px; }.download-dialog-icon svg { width: 24px; height: 24px; }.download-preview-dialog h2 { font-size: 26px; line-height: 1.2; letter-spacing: -.9px; font-weight: 500; }.download-file-name { font-size: 12px; margin: 12px 0 24px; color: #8991a2; overflow-wrap: anywhere; }.download-price-line { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 0; border-block: 1px solid #e8ebf2; font-size: 12px; color: #7c8598; }.download-price-line strong { font-size: 23px; color: #37405a; font-weight: 500; white-space: nowrap; }.download-preview-dialog [data-download-includes] { font-size: 12px; color: #8991a2; margin-top: 12px; line-height: 1.7; }.download-preview-note { font-size: 12px; line-height: 1.7; color: #816aa4; padding: 13px 14px; background: #f4f0fc; border-radius: 9px; margin-top: 20px; }.download-dialog-actions { display: grid; grid-template-columns: 1fr 1.1fr; gap: 8px; margin-top: 22px; }.download-dialog-actions .button { font-size: 12px; padding: 0 10px; }
  .editor { height: calc(100dvh - 78px); background: #f5f6fa; }.document-bar { background: #fff; border-color: #e1e5ee; }.workspace { background: #e9edf4; }.canvas-scroll { background-color: #e9edf4; background-image: radial-gradient(#b9c2d03b .65px, transparent .65px); }.toolbar, .left-panel, .inspector { background: #fcfcfe; }.tool.active { background: #e9e3fa; color: #746096; }.panel-tabs > button[aria-selected=true] { color: #746096; }.panel-tabs > button[aria-selected=true]::after { background: #9a85cd; }.tool-hint { background: #f0edf7; color: #8b7b9e; }.direct-summary { background: #f2eef9; border-color: #dfd6ef; }.direct-summary > strong, #direct-status { color: #89739b; }#edit-existing-sidebar { background: #e8e0f4; border-color: #d7c8e9; color: #856696; }.page-navigation { background: #fcfcfe; border-color: #e1e5ee; }.mobile-panel-toggle { color: #826990; border-color: #ddd3ea; background: #f1ecf7; }
  .editor .inline-editor-toolbar, .editor .inline-editor-meta, .editor .inline-editor-actions { border-color: #d9d4e8; }.editor .inline-editor-actions .direct-apply { background: #20273f; border-color: #20273f; }

  /* Workspaces share a calm canvas, with controls close to the document. */
  .studio-shell, .template-studio { color: #171c31; }
  .studio-heading h1, .template-studio h1 { font-size: 38px; line-height: 1.2; font-weight: 520; letter-spacing: -1.6px; margin: 0 0 10px; }
  .studio-heading p, .template-studio > p { color: #818b9c; font-size: 14px; line-height: 1.7; }
  .studio-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 25px 0; padding: 5px; background: #e9edf4; border-radius: 12px; width: fit-content; }
  .studio-tabs button { min-height: 42px; padding: 0 18px; border-radius: 9px; color: #858fa0; font-size: 12px; }
  .studio-tabs button[aria-selected=true], .studio-tabs button.active { background: #fff; color: #5c577a; box-shadow: 0 2px 5px #20273f08; }
  .studio-layout { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 24px; margin-top: 25px; }
  .studio-settings { border: 1px solid #e1e6ee; background: #fff; border-radius: 15px; padding: 22px; align-self: start; }
  .studio-settings h2, .studio-settings h3 { font-size: 15px; font-weight: 550; margin-bottom: 16px; }
  .studio-settings label { font-size: 12px; color: #78859a; display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
  .studio-settings select, .studio-settings input:not([type=checkbox]), .studio-settings textarea { width: 100%; border: 1px solid #dfe4ef; border-radius: 8px; padding: 10px; font-size: 13px; color: #434e66; background: #fbfcfe; min-height: 42px; }
  .studio-settings p, .studio-settings small { font-size: 11px; line-height: 1.7; color: #929cae; }
  .studio-main { min-width: 0; }
  .studio-dropzone { border: 1.5px dashed #c7bcdf; border-radius: 15px; padding: 30px; background: #f6f2fc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; min-height: 190px; }
  .studio-dropzone h2, .studio-dropzone strong { font-size: 17px; font-weight: 500; letter-spacing: -.3px; }.studio-dropzone p { font-size: 12px; color: #998bad; line-height: 1.7; }.studio-dropzone button { min-height: 44px; padding: 0 18px; border-radius: 9px; background: #26263e; color: #fff; font-size: 13px; }
  .studio-batchbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 18px 0; font-size: 12px; color: #8490a3; }
  .studio-batchbar button { min-height: 36px; border: 1px solid #dfe4ed; padding: 0 12px; border-radius: 7px; background: #fff; font-size: 11px; color: #6c7890; }
  .studio-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(155px,1fr)); gap: 16px; }
  .studio-page { min-width: 0; border: 1px solid #dde3ee; background: #fff; border-radius: 13px; padding: 13px; position: relative; box-shadow: 0 3px 9px #24354b05; }
  .studio-page:has(input:checked) { border-color: #aa98ce; background: #f8f5fd; }.studio-page canvas { display: block; max-width: 100%; width: auto; max-height: 170px; margin: 8px auto 12px; background: #fff; box-shadow: 0 2px 7px #2630470f; }.studio-page > label { font-size: 11px; color: #8b789f; display: flex; align-items: center; gap: 6px; }.studio-page input { width: 17px; height: 17px; accent-color: #9b83c4; }.studio-page strong { font-size: 12px; font-weight: 550; display: block; margin: 6px 0; }.studio-page small { font-size: 10px; color: #8e98a8; overflow-wrap: anywhere; }.studio-page-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; border-top: 1px solid #e9edf4; padding-top: 10px; margin-top: 10px; }.studio-page-actions button { min-height: 34px; min-width: 0; font-size: 13px; color: #8c7b9e; border: 1px solid #e4e2ec; border-radius: 6px; background: #fff; }.studio-page-actions button:hover { background: #f1ebfa; }
  .studio-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid #e0e5ef; margin-top: 25px; padding: 20px 0; }.studio-footer button { min-height: 44px; padding: 0 18px; border: 1px solid #dbe2ed; border-radius: 9px; color: #76839b; background: #fff; font-size: 12px; }.studio-footer button:first-of-type { background: #212a43; color: #fff; border-color: #212a43; }.studio-status { font-size: 12px; color: #8b789e; line-height: 1.7; margin: 12px 0; }.studio-status:empty { display: none; }.studio-results { border-radius: 13px; padding: 20px; background: #eaf5ef; border: 1px solid #cfe6d8; }.studio-results button { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: space-between; border-bottom: 1px solid #d3e9dd; color: #6e9480; font-size: 12px; text-align: left; }
  .template-catalog { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; margin: 28px 0; }.template-card { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #e1e6ef; background: #fff; border-radius: 15px; padding: 25px; text-align: left; gap: 12px; }.template-card h2, .template-card h3 { font-size: 18px; font-weight: 550; letter-spacing: -.4px; }.template-card p { color: #9aa2b1; font-size: 12px; line-height: 1.7; }.template-card button, button.template-card { color: #78618f; }.template-card.active, .template-card[aria-pressed=true] { border-color: #a78cc3; background: #faf7fd; }
  .template-workbench { display: grid; grid-template-columns: minmax(280px,.9fr) minmax(0,1.1fr); gap: 28px; margin-top: 28px; align-items: start; }.template-form { padding: 26px; border: 1px solid #e0e5ef; border-radius: 16px; background: #fff; }.template-form h2 { font-size: 20px; font-weight: 500; margin-bottom: 22px; letter-spacing: -.5px; }.template-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }.template-field label, label.template-field { font-size: 12px; color: #7b879d; line-height: 1.6; }.template-field input, .template-field textarea, .template-field select { width: 100%; font-size: 14px; padding: 11px 12px; min-height: 44px; border: 1px solid #dde3ef; background: #fcfcfe; border-radius: 8px; color: #3c4963; }.template-field textarea { min-height: 90px; line-height: 1.6; resize: vertical; }.template-field small { font-size: 11px; color: #9ea8b9; }.template-preview { min-width: 0; padding: 28px; background: #edf0f7; border: 1px solid #e0e6f0; border-radius: 16px; }.template-preview canvas { display: block; width: 100%; height: auto; box-shadow: 0 5px 20px #303f5a0c; margin-bottom: 15px; }.template-preview h2 { font-size: 14px; margin-bottom: 15px; font-weight: 500; color: #7a87a2; }.template-preview p { font-size: 12px; line-height: 1.7; color: #9ba6ba; }.template-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }.template-actions button { min-height: 44px; padding: 0 16px; border-radius: 9px; border: 1px solid #d8dfeb; background: #fff; color: #7b6b95; font-size: 12px; }.template-actions button:first-child { background: #252e48; color: #fff; border-color: #252e48; }.template-status { color: #9b83ab; font-size: 12px; line-height: 1.7; margin-top: 15px; }

  @media (max-width:1100px) { .portal-topbar { gap: 25px; }.portal-hero { padding-top: 55px; min-height: 600px; }.hero-copy h1 { font-size: 64px; }.hero-stage { transform: scale(.9); transform-origin: center; }.tool-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }.portal-tool-card { min-height: 215px; }.portal-promise { gap: 35px; padding: 45px; }.model-art { padding: 22px; }.art-title { font-size: 23px; } }
  @media (max-width:800px) { .portal-topbar { height: 70px; padding: 0 20px; gap: 18px; }.portal-nav { margin-left: auto; gap: 0; }.portal-nav > button { padding: 8px 11px; font-size: 12px; }.preview-label { font-size: 10px; }.top-actions { gap: 0; }.top-actions > .preview-label { display: none; }.nav-new { display: none; }.brand { font-size: 24px; }.brand-icon { width: 31px; height: 34px; border-radius: 9px; }.brand-icon svg { width: 18px; height: 18px; }.portal-home { padding: 0 22px; }.portal-hero { padding: 42px 0 45px; grid-template-columns: 1fr 1fr; min-height: 530px; }.hero-copy h1 { font-size: 54px; letter-spacing: -3px; }.hero-copy > p { font-size: 14px; }.hero-actions { flex-direction: column; align-items: flex-start; gap: 5px; }.hero-stage { transform: scale(.72); transform-origin: center; margin: 0 -35px; }.hero-privacy { font-size: 10px; max-width: 250px; line-height: 1.6; }.section-intro h2 { font-size: 31px; }.model-showcase { gap: 16px; }.model-art { height: 170px; padding: 20px; }.art-title { font-size: 20px; }.model-feature h3 { font-size: 19px; }.model-feature p { font-size: 12px; }.portal-promise { padding: 35px; gap: 30px; }.portal-promise h2 { font-size: 34px; }.portal-footer > span { max-width: 150px; line-height: 1.6; }.portal-workspace { padding: 30px 20px 50px; }.studio-layout { grid-template-columns: 210px minmax(0,1fr); gap: 16px; }.studio-settings { padding: 18px; }.template-workbench { gap: 20px; grid-template-columns: 1fr 1fr; }.template-form, .template-preview { padding: 20px; }.portal-pricing { padding-top: 40px; }.pricing-intro h1 { font-size: 43px; }.pricing-layout { gap: 15px; }.pricing-single, .pricing-plan { padding: 25px; }.plan-price strong { font-size: 35px; }.editor, .editor.is-text-editing { height: calc(var(--visual-viewport-height,100dvh) - 70px); }.document-bar { min-height: 70px; }.toolbar .tool.active { background: #e9e2f7; border-color: #c1afd9; color: #7f6497; box-shadow: inset 0 0 0 1px #cbbddd; } }
  @media (max-width:600px) { .portal-topbar { height: 68px; padding: 0 16px; gap: 12px; flex-wrap: wrap; }.portal-nav { order: 3; width: 100%; justify-content: space-between; align-self: auto; height: 45px; margin: 0; gap: 8px; padding-bottom: 6px; }.portal-topbar { height: 112px; padding-top: 12px; align-content: space-between; }.portal-nav > button { justify-content: center; flex: 1; min-height: 37px; font-size: 12px; padding: 5px; }.portal-topbar .top-actions { margin-left: auto; }.portal-topbar .top-actions .icon-button { width: 38px; height: 38px; }.portal-home { padding: 0 20px; }.portal-hero { grid-template-columns: 1fr; gap: 15px; padding: 34px 0 28px; min-height: 0; }.hero-copy h1 { font-size: 63px; letter-spacing: -3.7px; margin: 20px 0; }.hero-copy h1 br:nth-of-type(1) { display: none; }.hero-copy > p { font-size: 14px; line-height: 1.8; max-width: 410px; }.portal-kicker { font-size: 8px; letter-spacing: 1.4px; }.hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }.hero-actions .button { min-height: 48px; font-size: 12px; padding: 0 14px; gap: 7px; }.hero-secondary { padding: 0 8px !important; }.hero-actions svg { width: 16px; height: 16px; }.hero-privacy { font-size: 10px; max-width: none; margin-top: 16px; }.hero-stage { min-height: 365px; transform: scale(.82); margin: -16px -20px -24px; transform-origin: 50% 50%; }.stage-tag { top: 0; font-size: 7px; }.document-front { top: 42px; left: 15%; width: 207px; height: 286px; padding: 20px; }.cv-name { font-size: 29px; margin-top: 21px; }.paper-small-title { margin-top: 12px; font-size: 5px; }.paper-rule { margin-top: 14px; }.cv-role { font-size: 5px; }.cv-monogram { width: 31px; height: 31px; right: 18px; top: 34px; font-size: 10px; }.document-back { width: 178px; height: 247px; top: 75px; right: 4%; padding: 16px; }.mini-photo { height: 82px; }.document-back > strong { font-size: 16px; }.pill-edit { top: 70px; right: 0; font-size: 10px; padding: 10px 13px; }.pill-ready { bottom: -4px; left: 6%; font-size: 10px; padding: 10px 14px; }.stage-orbit { width: 320px; height: 320px; }.orbit-two { width: 390px; height: 230px; }.tools-section { padding: 28px 0 32px; }.section-intro { align-items: flex-start; margin-bottom: 23px; gap: 15px; }.section-intro > p { display: none; }.section-intro h2 { font-size: 30px; margin-top: 11px; letter-spacing: -1.3px; }.tool-cards { gap: 10px; }.portal-tool-card { padding: 16px; min-height: 224px; border-radius: 13px; }.portal-tool-icon { width: 38px; height: 40px; border-radius: 11px; margin-bottom: 16px; }.portal-tool-icon svg { width: 19px; height: 19px; }.tool-card-title { font-size: 14px; letter-spacing: -.4px; }.tool-card-title > span { font-size: 18px; }.portal-tool-card > p { font-size: 11px; line-height: 1.7; margin-top: 9px; }.tool-card-foot { font-size: 6px; line-height: 1.8; letter-spacing: .7px; padding-top: 18px; }.demo-link { flex-wrap: wrap; font-size: 11px; line-height: 1.8; margin: 16px 0 0; }.portal-models { padding: 35px 0; }.portal-models .section-intro { flex-direction: column; gap: 4px; }.text-link { font-size: 11px; }.model-showcase { grid-template-columns: 1fr; gap: 28px; }.model-feature { display: grid; grid-template-columns: .85fr 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 20px; padding-top: 18px; align-items: start; }.model-number { grid-column: 1/-1; font-size: 8px; margin-bottom: 15px; }.model-art { grid-column: 1; grid-row: 2/5; height: 171px; margin: 0; padding: 18px; border-radius: 11px; }.art-title { font-size: 18px; }.model-feature h3 { grid-column: 2; font-size: 20px; margin-top: 4px; }.model-feature > p { grid-column: 2; font-size: 12px; line-height: 1.7; margin-top: 8px; }.model-action { grid-column: 2; font-size: 10px; margin: 12px 0 0; }.receipt-amount { font-size: 28px; }.receipt-stamp { font-size: 7px; padding: 4px 7px; }.art-sign { font-size: 21px; left: 15px; }.portal-promise { grid-template-columns: 1fr; padding: 28px; gap: 35px; border-radius: 18px; margin: 30px 0 42px; }.portal-promise h2 { font-size: 34px; }.portal-promise p { font-size: 12px; }.portal-promise .button { font-size: 11px; padding: 0 12px; }.promise-steps { gap: 22px; }.promise-steps strong { font-size: 13px; }.promise-steps p { font-size: 11px; }.portal-footer { flex-wrap: wrap; gap: 10px 20px; padding: 22px 0 30px; }.portal-footer p { margin-left: auto; font-size: 10px; }.portal-footer > span { flex-basis: 100%; margin: 0; max-width: none; font-size: 9px; }.portal-workspace { padding: 27px 16px 40px; }.studio-heading h1, .template-studio h1 { font-size: 31px; letter-spacing: -1.3px; }.studio-heading p { font-size: 13px; }.studio-tabs { margin: 22px 0; display: grid; grid-template-columns: repeat(3,1fr); width: 100%; gap: 3px; }.studio-tabs button { padding: 0 5px; font-size: 10px; min-height: 42px; }.studio-layout { grid-template-columns: 1fr; margin-top: 18px; }.studio-settings { padding: 18px; }.studio-settings label { font-size: 13px; }.studio-settings select, .studio-settings input:not([type=checkbox]) { font-size: 16px; }.studio-dropzone { padding: 25px 18px; min-height: 185px; }.studio-dropzone p { font-size: 12px; }.studio-batchbar button { min-height: 42px; }.studio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.studio-page { padding: 10px; }.studio-page-actions button { min-height: 40px; }.studio-page canvas { max-height: 140px; }.studio-footer { display: grid; grid-template-columns: 1fr; gap: 8px; }.studio-footer button { min-height: 46px; }.template-catalog { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 22px 0; }.template-card { padding: 17px; gap: 9px; }.template-card h2, .template-card h3 { font-size: 15px; }.template-card p { font-size: 11px; }.template-workbench { grid-template-columns: 1fr; gap: 16px; }.template-form, .template-preview { padding: 20px; }.template-field input, .template-field textarea, .template-field select { font-size: 16px; }.template-actions { display: grid; grid-template-columns: 1fr 1fr; }.template-actions button { min-height: 46px; font-size: 12px; }.portal-pricing { padding: 35px 20px 50px; }.pricing-intro h1 { font-size: 37px; letter-spacing: -1.6px; }.pricing-intro p { font-size: 13px; }.pricing-disclaimer { font-size: 11px; padding: 12px; }.pricing-layout { grid-template-columns: 1fr; margin-top: 12px; }.pricing-single, .pricing-plan { padding: 27px; }.pricing-single h2 { font-size: 24px; }.price-rows strong { font-size: 13px; }.price-rows b { font-size: 17px; }.price-rows small { font-size: 10px; }.pricing-faq { grid-template-columns: 1fr; gap: 25px; margin-top: 45px; }.pricing-faq h2 { font-size: 26px; }.pricing-faq p { font-size: 12px; }.download-preview-dialog { padding: 23px; }.download-preview-dialog h2 { font-size: 24px; }.download-dialog-actions { grid-template-columns: 1fr; }.download-dialog-actions .button { min-height: 46px; }.editor, .editor.is-text-editing { height: calc(var(--visual-viewport-height,100dvh) - 112px); }.editor.is-text-editing { min-height: 180px; }.editor .document-bar { min-height: 68px; } body[data-view=editor] .portal-topbar { height: 64px; padding-top: 0; align-content: center; }body[data-view=editor] .portal-nav { display: none; }body[data-view=editor] .editor, body[data-view=editor] .editor.is-text-editing { height: calc(var(--visual-viewport-height,100dvh) - 64px); }
  }
  @media (max-width:360px) { .hero-copy h1 { font-size: 53px; letter-spacing: -3px; }.hero-stage { transform: scale(.74); margin: -23px -20px -38px; }.hero-actions { flex-direction: column; align-items: stretch; gap: 5px; }.hero-actions .button { min-height: 48px; }.tool-card-title { font-size: 12px; }.portal-tool-card { padding: 14px; min-height: 227px; }.portal-tool-card > p { font-size: 11px; }.model-feature { column-gap: 15px; grid-template-columns: .82fr 1fr; }.model-art { padding: 14px; }.art-title { font-size: 16px; }.model-feature h3 { font-size: 18px; }.model-feature p { font-size: 11px; }.model-action { font-size: 9px; }.portal-promise { padding: 24px; }.portal-promise .button { white-space: normal; line-height: 1.5; min-height: 48px; }.template-catalog { grid-template-columns: 1fr; } }
}

@layer portal {
  .studio-heading h2, .template-intro h2 { font-size: 36px; line-height: 1.2; font-weight: 520; letter-spacing: -1.5px; margin: 10px 0 12px; max-width: 720px; }
  .studio-eyebrow, .template-eyebrow { font-size: 9px; letter-spacing: 1.5px; font-weight: 650; color: #929bad; }
  .template-intro p { color: #8792a5; font-size: 14px; line-height: 1.7; max-width: 720px; }
  .studio-dropzone { width: 100%; }.studio-drop-icon { display: inline-grid; place-items: center; width: 38px; height: 39px; font-size: 24px; color: #a28ac1; background: #eae1f7; border-radius: 10px; }.studio-dropzone > span:not(.studio-drop-icon) { color: #9b88af; font-size: 12px; }.studio-dropzone > small { color: #a69ab8; font-size: 10px; line-height: 1.7; }.studio-dropzone.is-drag-over { border-color: #9573c2; background: #e9ddf9; }
  .studio-settings { position: sticky; top: 20px; }.studio-summary { border-bottom: 1px solid #e5eaf3; padding-bottom: 20px; margin-bottom: 22px; }.studio-summary-label { display: block; color: #adb5c4; font-size: 8px; letter-spacing: 1.5px; margin-bottom: 10px; }.studio-summary strong { display: block; font-size: 18px; font-weight: 500; letter-spacing: -.4px; }.studio-summary p { margin-top: 8px; }.studio-footer { flex-direction: column; align-items: stretch; margin: 22px 0 0; }.studio-footer button { white-space: normal; line-height: 1.5; padding: 10px 14px; }.studio-cancel, .studio-apply-range { min-height: 42px; font-size: 12px; border: 1px solid #e2d8ef; background: #f6f0fc; border-radius: 8px; padding: 8px 12px; color: #9c7ab5; width: 100%; }.studio-local-note { margin-top: 20px; font-size: 10px !important; line-height: 1.8 !important; color: #a2adbd !important; }.studio-selection-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }.studio-count { font-size: 12px; line-height: 1.7; color: #9aa7bb; }.studio-page-source { font-size: 11px; line-height: 1.5; color: #8a98ae; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.studio-page-origin { display: block; color: #a9b4c6; font-size: 10px; margin-top: 5px; }.studio-preview { min-height: 185px; display: flex; align-items: center; }.studio-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1px solid #e4e9f2; padding: 45px 25px; border-radius: 15px; color: #9daac0; font-size: 13px; background: #f3f6fb; text-align: center; }.studio-empty > span { font-size: 40px; color: #c0cadb; }.studio-empty strong { color: #9aabc0; font-weight: 500; }.studio-empty p { font-size: 12px; line-height: 1.6; }.studio-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: #799e8b; padding: 10px 0; }.studio-results h3 { font-size: 15px; font-weight: 500; margin-bottom: 10px; }.studio-results .studio-result button { width: auto; padding: 0 12px; white-space: nowrap; }.studio-status.is-error, .template-status.is-error { color: #b26667; background: #fff3f1; border: 1px solid #f0d7d5; border-radius: 8px; padding: 12px; }
  .template-categories { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 26px; }.template-category { padding: 0 17px; min-height: 42px; border: 1px solid #e2e6ef; border-radius: 25px; color: #8c97aa; font-size: 12px; background: #fff; }.template-category[aria-pressed=true] { background: #242d48; color: #fff; border-color: #242d48; }.template-card { gap: 18px; padding: 20px; }.template-miniature { width: 100%; height: 146px; padding: 22px; background: #eeedf8; border-radius: 9px; display: flex; flex-direction: column; align-items: flex-start; }.template-miniature-contracts { background: #e6f0eb; }.template-miniature-receipts { background: #f4ece5; }.template-mini-title { font-size: 17px; line-height: 1.2; font-weight: 500; color: #9582af; margin: 0 0 16px; }.template-miniature-contracts .template-mini-title { color: #8eab9c; }.template-miniature-receipts .template-mini-title { color: #bea18c; }.template-mini-line { display: block; width: 100%; height: 3px; background: #d9d2e7; margin-bottom: 7px; border-radius: 6px; }.template-mini-line.short { width: 66%; }.template-miniature-contracts .template-mini-line { background: #d0e0d6; }.template-miniature-receipts .template-mini-line { background: #e8d7c9; }.template-card-info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }.template-card-badge { color: #b2a3c4; font-size: 7px; letter-spacing: 1.2px; text-transform: uppercase; }.template-card-info strong { color: #64738c; font-size: 16px; line-height: 1.4; font-weight: 550; letter-spacing: -.3px; }.template-card-description { font-size: 11px; line-height: 1.8; color: #9da8ba; }.template-card-formats { font-size: 9px; color: #ab94c3; margin-top: 4px; }
  .template-inputs { background: #fff; border: 1px solid #e2e8f1; border-radius: 16px; padding: 26px; }.template-form { background: transparent; border: none; border-radius: 0; padding: 0; margin-top: 23px; }.template-form-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.template-form-heading h3 { font-size: 19px; font-weight: 550; letter-spacing: -.5px; }.template-example { color: #b092c6; font-size: 10px; min-height: 40px; padding: 8px; text-align: right; line-height: 1.5; }.template-description { color: #9ca8bc; font-size: 12px; line-height: 1.7; margin-top: 10px; }.template-notice { background: #f7f3fc; border: 1px solid #e8e0f2; color: #b299c7; font-size: 10px; line-height: 1.8; padding: 12px; border-radius: 8px; margin-top: 22px; }.template-review { display: flex; align-items: flex-start; gap: 9px; font-size: 11px; color: #a5b1c3; line-height: 1.8; margin-top: 20px; }.template-review input { width: 18px; height: 18px; margin-top: 2px; accent-color: #a38abb; flex-shrink: 0; }.template-preview-heading { display: flex; align-items: center; gap: 15px; justify-content: space-between; margin-bottom: 15px; }.template-preview-heading h3 { font-size: 13px; font-weight: 500; color: #a1b0c7; }.template-page-count { font-size: 10px; color: #b6c1d1; white-space: nowrap; }.template-preview-note { color: #a5b5ce !important; font-size: 11px !important; margin-bottom: 20px; }.template-preview-page { margin: 0 0 20px; }.template-preview-page figcaption { text-align: center; font-size: 9px; color: #bbc7da; margin-top: 10px; }.template-actions button:last-child { flex-basis: 100%; background: #f6f8fc; color: #a2aeca; }
  @media(max-width:800px) { .studio-layout { grid-template-columns: minmax(0,1fr) 220px; }.studio-heading h2, .template-intro h2 { font-size: 31px; }.template-inputs { padding: 21px; } }
  @media(max-width:600px) { .studio-layout { grid-template-columns: minmax(0,1fr); }.studio-settings { position: static; }.studio-selection-actions { margin: 4px 0 0; }.studio-count { width: 100%; }.studio-preview { min-height: 156px; }.studio-result { align-items: flex-start; flex-direction: column; }.studio-results .studio-result button { width: 100%; }.template-categories { gap: 6px; }.template-category { padding: 0 13px; min-height: 42px; font-size: 11px; }.template-card { padding: 16px; }.template-miniature { height: 130px; padding: 18px; }.template-card-info strong { font-size: 15px; }.template-mini-title { font-size: 16px; }.template-inputs { padding: 20px; }.template-actions button:last-child { grid-column: 1/-1; }.template-review { font-size: 12px; }.template-notice { font-size: 11px; }.template-description { font-size: 12px; }.template-form-heading h3 { font-size: 18px; }.template-example { font-size: 10px; }.studio-heading h2, .template-intro h2 { font-size: 29px; letter-spacing: -1px; }.template-intro p { font-size: 13px; }.studio-batchbar button { min-height: 42px; }.template-actions button { font-size: 11px; } }
}

@layer portal {
  .hero-privacy, .portal-tool-card > p, .model-feature > p, .demo-link,
  .template-intro p, .template-description, .template-card-description,
  .template-review, .template-preview-heading h3, .template-page-count,
  .studio-count, .studio-page-source, .studio-page-origin { color: #5e687d; }
  .template-notice, .template-example, .template-card-formats { color: #705383; }
  .template-card-info strong { color: #283550; }
  .studio-dropzone > span:not(.studio-drop-icon), .studio-dropzone > small { color: #745784; }
  .studio-empty, .studio-empty strong { color: #5e6e88; }
  .studio-local-note, .template-preview-note { color: #67748c !important; }
  .template-actions button:last-child { color: #596a87; }
  .tool-card-foot, .model-number, .portal-footer > span { color: #727b8e; }
}