.schema-main { min-height: 100vh; padding: 110px 0 96px; background: var(--theme-bg); color: var(--theme-text); }.schema-shell { width: min(1340px, calc(100% - 48px)); margin: 0 auto; }.schema-breadcrumb, .schema-back-link { min-height: 44px; display: flex; align-items: center; gap: 9px; color: var(--theme-text-muted); font-size: 10px; }.schema-breadcrumb a, .schema-back-link:hover { color: var(--mint-dark); }.schema-hero { padding: clamp(42px, 7vw, 92px) 0 clamp(48px, 7vw, 90px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .46fr); align-items: end; gap: 48px; position: relative; overflow: hidden; border-bottom: 1px solid var(--theme-border); }.schema-hero::after { content: "{}"; position: absolute; left: -24px; bottom: -11px; color: var(--theme-border); direction: ltr; font: 900 clamp(8rem, 21vw, 18rem)/.7 monospace; letter-spacing: -.22em; pointer-events: none; }.schema-hero > * { position: relative; z-index: 1; }.schema-eyebrow, .schema-section-head > span, .schema-form-head span, .schema-output-head span, .schema-related span, .schema-cta > span { color: var(--mint-dark); direction: ltr; font: 9px/1.2 monospace; letter-spacing: .13em; }.schema-eyebrow { display: inline-flex; align-items: center; gap: 9px; }.schema-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 16px var(--mint); }.schema-hero h1 { margin: 19px 0 0; font-size: clamp(3.2rem, 7.4vw, 7.8rem); font-weight: 850; line-height: .98; letter-spacing: -.075em; }.schema-hero h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--theme-text); }.schema-hero > p { max-width: 455px; margin: 0 0 7px; color: var(--theme-text-muted); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 2.05; }
.schema-type-section { padding: clamp(52px, 7vw, 90px) 0; }.schema-section-head h2, .schema-form-head h2, .schema-output-head h2 { margin: 10px 0 0; font-size: clamp(1.8rem, 3.2vw, 3.25rem); line-height: 1.2; }.schema-types { margin-top: 30px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--theme-border); border-right: 1px solid var(--theme-border); }.schema-types button { min-height: 178px; padding: 22px; display: grid; align-content: space-between; justify-items: start; gap: 14px; border: 0; border-bottom: 1px solid var(--theme-border); border-left: 1px solid var(--theme-border); background: var(--theme-surface); color: var(--theme-text); text-align: right; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }.schema-types button:hover { background: var(--theme-surface-soft); }.schema-types button[aria-selected="true"] { background: var(--ink); color: var(--white); box-shadow: inset 0 4px var(--mint); }.schema-types small { color: var(--mint-dark); direction: ltr; font: 9px monospace; }.schema-types button[aria-selected="true"] small { color: var(--mint); }.schema-types b { font-size: 17px; }.schema-types span { color: var(--theme-text-muted); font-size: 9px; line-height: 1.7; }.schema-types button[aria-selected="true"] span { color: #aabbb4; }
.schema-workspace { padding: clamp(56px, 7vw, 98px) 0; display: grid; grid-template-columns: minmax(0, .93fr) minmax(440px, 1.07fr); align-items: start; gap: clamp(34px, 6vw, 92px); border-top: 1px solid var(--theme-border); }.schema-workspace > *, .schema-form, .schema-output { min-width: 0; }.schema-form { padding: clamp(23px, 3vw, 38px); border: 1px solid var(--theme-border); background: var(--theme-surface); box-shadow: 12px 12px 0 var(--theme-surface-soft); }.schema-form-head { margin-bottom: 29px; padding-bottom: 22px; display: grid; gap: 9px; border-bottom: 1px solid var(--theme-border); }.schema-form-head p { margin: 0; color: var(--theme-text-muted); font-size: 10px; }.schema-form-head p b, .is-required { margin-right: 5px; padding: 2px 6px; border: 1px solid rgba(11,189,132,.4); color: var(--mint-dark); font-size: 8px; font-weight: 600; }.is-optional { margin-right: 5px; color: var(--theme-text-muted); font-size: 8px; font-weight: 500; }.schema-field { min-width: 0; margin-top: 20px; }.schema-field label { display: block; color: var(--theme-text); font-size: 12px; font-weight: 760; }.schema-field input, .schema-field textarea, .schema-field select, .schema-collection-row input, .schema-breadcrumb-row input { width: 100%; min-width: 0; min-height: 47px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--theme-border); border-radius: 0; outline: 0; background: var(--theme-bg); color: var(--theme-text); font: 11px/1.8 var(--font-main); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }.schema-field textarea { min-height: 104px; resize: vertical; }.schema-field input:focus, .schema-field textarea:focus, .schema-field select:focus, .schema-collection-row input:focus, .schema-breadcrumb-row input:focus { border-color: var(--mint-dark); box-shadow: 0 0 0 3px rgba(11,189,132,.13); }.schema-field-error { margin: 6px 0 0; color: #c95532; font-size: 9px; line-height: 1.7; }.schema-collection-head { margin-top: 30px; padding-top: 22px; display: flex; align-items: end; justify-content: space-between; gap: 16px; border-top: 1px solid var(--theme-border); }.schema-collection-head h3, .schema-messages h3 { margin: 0; font-size: 13px; }.schema-collection-head p { max-width: 260px; margin: 5px 0 0; color: var(--theme-text-muted); font-size: 9px; line-height: 1.75; }.schema-inline-button, .schema-row-remove, .schema-row-controls button { min-height: 36px; padding: 6px 9px; border: 1px solid var(--theme-border); border-radius: 0; background: transparent; color: var(--theme-text); cursor: pointer; font: 9px var(--font-main); }.schema-inline-button:hover, .schema-row-controls button:hover { border-color: var(--mint-dark); color: var(--mint-dark); }.schema-collection-row { min-width: 0; margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }.schema-collection-row input, .schema-breadcrumb-row input { margin: 0; }.schema-row-remove { color: #c95532; }.schema-row-remove:disabled, .schema-row-controls button:disabled { opacity: .4; cursor: not-allowed; }.schema-breadcrumb-row { min-width: 0; margin-top: 10px; padding: 10px; display: grid; grid-template-columns: 28px minmax(0, .8fr) minmax(0, 1.1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--theme-border); }.schema-breadcrumb-row > b { color: var(--mint-dark); direction: ltr; font: 9px monospace; }.schema-row-controls { display: flex; gap: 4px; }.schema-row-controls button { min-width: 29px; padding: 4px; }.schema-currency-note { margin: 13px 0 0; padding: 11px; border-right: 2px solid var(--mint-dark); background: rgba(11,189,132,.07); color: var(--theme-text-muted); font-size: 9px; line-height: 1.85; }.schema-messages { margin-top: 29px; padding-top: 22px; border-top: 1px solid var(--theme-border); }.schema-messages h3 { margin-bottom: 10px; }.schema-message-error, .schema-message-warning { margin: 6px 0; padding: 9px 10px; font-size: 9px; line-height: 1.7; }.schema-message-error { border-right: 2px solid #c95532; background: rgba(201,85,50,.08); color: #b74d2d; }.schema-message-warning { border-right: 2px solid #a56b2e; background: rgba(165,107,46,.09); color: #8a551f; }
.schema-output { position: sticky; top: 100px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--theme-border); background: var(--ink); color: var(--white); box-shadow: 14px 14px 0 var(--theme-surface-soft); }.schema-output-head { padding-bottom: 19px; display: flex; align-items: end; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.14); }.schema-output-head > div > span { color: var(--mint); }.schema-output-head h2 { color: var(--white); font-size: clamp(1.55rem, 2.5vw, 2.25rem); }.schema-output-status { padding: 4px 7px; border: 1px solid rgba(255,255,255,.18); color: #9aaca5; font-size: 8px; white-space: nowrap; }.schema-output-status[data-state="valid"] { border-color: rgba(103,245,196,.45); color: var(--mint); }.schema-output-status[data-state="warning"] { color: #e3bd77; }.schema-output-status[data-state="error"] { color: #ff9777; }.schema-code { min-height: 370px; max-height: 540px; margin: 22px 0; padding: 18px; overflow: auto; background: #06100e; color: #bfcec7; font: 11px/1.85 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: left; }.schema-code code { white-space: pre; }.schema-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.schema-button { min-height: 44px; padding: 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 0; background: transparent; color: var(--white); cursor: pointer; font: 9px var(--font-main); transition: background .2s var(--ease), color .2s var(--ease); }.schema-button:hover { border-color: var(--mint); color: var(--mint); }.schema-button-primary { border-color: var(--mint); background: var(--mint); color: var(--ink); font-weight: 750; }.schema-button-primary:hover { background: var(--white); color: var(--ink); }.schema-button-reset { color: #ffad94; }.schema-action-feedback { min-height: 22px; margin: 10px 0 0; color: var(--mint); font-size: 9px; }.schema-action-feedback.is-error { color: #ff9777; }.schema-validator-links { margin-top: 24px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.14); }.schema-validator-links strong { display: block; margin-bottom: 10px; font-size: 10px; }.schema-validator-links a { min-height: 32px; display: flex; align-items: center; justify-content: space-between; color: var(--mint); font-size: 9px; }.schema-validator-links p { margin: 11px 0 0; color: #9aaca5; font-size: 8px; line-height: 1.9; }
.schema-install, .schema-related { padding: clamp(56px, 7vw, 98px) 0; border-top: 1px solid var(--theme-border); }.schema-install-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--theme-border); border-right: 1px solid var(--theme-border); }.schema-install-grid article { min-height: 215px; padding: 25px; border-bottom: 1px solid var(--theme-border); border-left: 1px solid var(--theme-border); background: var(--theme-surface); }.schema-install-grid b { color: var(--mint-dark); direction: ltr; font: 12px monospace; }.schema-install-grid p { margin: 16px 0 0; color: var(--theme-text-muted); font-size: 10px; line-height: 2; }.schema-install-grid code { direction: ltr; color: var(--theme-text); font-family: monospace; }.schema-related { display: flex; align-items: end; justify-content: space-between; gap: 28px; }.schema-related h2, .schema-cta h2 { max-width: 850px; margin: 13px 0 0; font-size: clamp(2.2rem, 4.5vw, 4.8rem); line-height: 1.13; letter-spacing: -.05em; }.schema-related a { min-height: 49px; padding: 11px 0; display: inline-flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--mint-dark); color: var(--mint-dark); font-size: 11px; white-space: nowrap; }.schema-cta { min-height: 400px; padding: clamp(42px, 7vw, 92px); display: grid; align-content: center; justify-items: start; background: var(--ink); color: var(--white); }.schema-cta > span { color: var(--mint); }.schema-cta h2 { margin: 19px 0 27px; }.schema-back-link { margin-top: 1px; transition: gap .2s var(--ease); }.schema-back-link:hover { gap: 15px; }
@media (max-width: 1050px) { .schema-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }.schema-workspace { grid-template-columns: 1fr; }.schema-output { position: static; }.schema-install-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .schema-main { padding: 78px 0 65px; }.schema-shell { width: min(100% - 32px, 1340px); }.schema-hero { grid-template-columns: 1fr; gap: 20px; padding-top: 35px; }.schema-hero h1 { font-size: clamp(3rem, 16vw, 4.9rem); }.schema-hero > p { margin: 0; }.schema-types { grid-template-columns: 1fr; }.schema-types button { min-height: 104px; grid-template-columns: 1fr auto; align-items: center; gap: 5px; }.schema-types small { grid-column: 2; grid-row: 1; }.schema-types b { grid-column: 1; grid-row: 1; }.schema-types span { grid-column: 1 / -1; }.schema-workspace { padding: 48px 0; gap: 48px; }.schema-form, .schema-output { padding: 21px 16px; box-shadow: 8px 8px 0 var(--theme-surface-soft); }.schema-breadcrumb-row { grid-template-columns: 23px 1fr; }.schema-breadcrumb-row input:nth-of-type(2) { grid-column: 2; }.schema-row-controls { grid-column: 1 / -1; justify-content: flex-end; }.schema-output-head { align-items: start; flex-direction: column; }.schema-code { min-height: 315px; font-size: 10px; }.schema-actions { grid-template-columns: 1fr; }.schema-button { min-height: 48px; }.schema-install-grid { grid-template-columns: 1fr; }.schema-install-grid article { min-height: 165px; }.schema-related { align-items: start; flex-direction: column; }.schema-related a { width: 100%; justify-content: space-between; }.schema-cta { min-height: 350px; padding: 38px 24px; }.schema-cta .button { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .schema-main *, .schema-main *::before, .schema-main *::after { scroll-behavior: auto !important; transition: none !important; } }