:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0c1321; color: #edf2ff; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 20% -10%, #1c3e60, transparent 37rem), #0c1321; min-height: 100vh; }
.page-shell { width: min(1480px, calc(100% - 2rem)); margin: 0 auto; padding-bottom: 3rem; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 0; color: #a8b7d5; font-size: .9rem; }.site-nav { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }.site-nav a { color: #bfe8ff; text-decoration: none; border-bottom: 1px solid transparent; }.site-nav a:hover { color: #fff; border-color: #7dd3fc; }
.site-header p { margin: 0; }.brand { color: #eff6ff; font-weight: 800; letter-spacing: .02em; text-decoration: none; font-size: 1.08rem; }.brand span, .eyebrow { color: #7dd3fc; }
.hero, .result-heading { padding: 2.3rem 0 1.5rem; }.hero { display: flex; gap: 2rem; justify-content: space-between; align-items: flex-end; }.hero h1, .result-heading h1, .error-page h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; margin: .25rem 0 .8rem; letter-spacing: -.04em; }
.hero > div:first-child { max-width: 48rem; }.eyebrow { margin: 0 0 .45rem; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.muted, .helper, .guide-grid p, .factor-card p { color: #a8b7d5; line-height: 1.5; }.lab-facts { min-width: min(100%, 28rem); margin: 0; }.lab-facts div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid #283752; }.lab-facts dt { color: #94a3b8; }.lab-facts dd { margin: 0; overflow-wrap: anywhere; }
.workbench-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(27rem, 1fr); gap: 1rem; align-items: start; }.card { background: rgba(15, 25, 44, .92); border: 1px solid #2d3d5c; border-radius: .8rem; padding: 1.2rem; box-shadow: 0 18px 50px rgba(0,0,0,.16); }.card-heading, .properties-heading, .factor-card header, .group-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }.card-heading h2, .card h2 { margin: .1rem 0; font-size: 1.2rem; }.preset-control { display: grid; gap: .25rem; min-width: 15rem; }.helper { font-size: .88rem; }.discovery-status { margin: .6rem 0; padding: .65rem .75rem; color: #bbd7ea; background: #122842; border-left: 3px solid #4d7fa7; border-radius: .25rem; font-size: .84rem; }.discovery-status.loaded { color: #c9f7dd; border-color: #50b889; }.discovery-status.unavailable { color: #ffe1b5; border-color: #d29a4d; }.builder-options { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; background: #111f36; border-radius: .6rem; padding: .9rem; margin: 1rem 0; }.select-label { display: grid; gap: .35rem; }.delivery-control { grid-column: 1 / -1; display: flex; gap: 1rem; border: 0; padding: 0; margin: 0; }.delivery-control legend { color: #a8b7d5; float: left; margin-right: 1rem; }
label { color: #dce7fc; font-size: .88rem; } input, select, textarea, button { font: inherit; } input[type="text"], input:not([type]), input[type="number"], select, textarea { color: #edf2ff; background: #0a1425; border: 1px solid #3b4d70; border-radius: .4rem; padding: .55rem .6rem; } input:not([type]), input[type="number"], select { width: 100%; margin-top: .3rem; } input[type="checkbox"] { accent-color: #38bdf8; margin-right: .35rem; }
.factor-list, .expression-children { display: grid; gap: .75rem; }.factor-card { background: #111f36; border: 1px solid #344665; border-radius: .6rem; padding: 1rem; }.group-card { background: #12253d; border: 1px solid #45779e; border-radius: .6rem; padding: 1rem; }.factor-card header > div:first-child, .group-card header > div:first-child { display: flex; align-items: center; gap: .85rem; }.node-title { font-weight: 800; color: #7dd3fc; min-width: 4.8rem; }.group-card .node-title { color: #a5e4ff; }.group-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin: .85rem 0; color: #b5c6df; font-size: .85rem; }.nested-children { margin-left: .55rem; padding-left: .9rem; border-left: 2px solid #45779e; }.row-actions, .button-row, .submit-row { display: flex; flex-wrap: wrap; gap: .5rem; }.constraint-grid { display: grid; grid-template-columns: 1.45fr .9fr .75fr 1.1fr; gap: .75rem; align-items: center; margin: 1rem 0; padding: .8rem 0; border-block: 1px solid #2b3c59; }.constraint-grid p, .properties p, .metadata-section p { margin: .25rem 0 0; font-size: .78rem; }.metadata-section { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #2b3c59; }.properties-heading { margin-bottom: .7rem; }.properties-heading p { margin-bottom: 0; }.property-list, .metadata-list { display: grid; gap: .65rem; }.empty-constraints { color: #8fa4c4; font-size: .8rem; font-style: italic; margin: .2rem 0 0; }.property-row { display: grid; grid-template-columns: minmax(11rem, 1.15fr) minmax(12rem, 1fr) minmax(12rem, 1.15fr) auto auto; gap: .65rem; align-items: end; padding: .7rem; background: #0d192d; border-radius: .45rem; }.property-row label { display: grid; min-width: 0; }.constraint-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; min-width: 0; align-items: end; }.constraint-values .property-value-label, .constraint-values .metadata-value-label { grid-column: 1 / -1; }.constraint-placeholder { color: #7186a8; font-size: .78rem; align-self: center; min-height: 1.4rem; }.hidden { display: none !important; }
button, .button { border: 1px solid transparent; border-radius: .42rem; padding: .56rem .8rem; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; }.primary { color: #062033; background: #7dd3fc; }.primary:hover { background: #b4e7fb; }.secondary { color: #d9edff; background: #1b3354; border-color: #45658e; }.secondary:hover { background: #274971; }.quiet { color: #a8d9f8; background: transparent; border-color: #3b5274; }.quiet:disabled { opacity: .4; cursor: not-allowed; }.danger { color: #fecaca; background: transparent; border-color: #85434c; }.button-row { margin-top: 1rem; }.json-card textarea { width: 100%; min-height: 36rem; resize: vertical; font: .82rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }.prompt-option { display: block; margin: .8rem 0; }.submit-row { justify-content: flex-end; }.notice { margin: 1rem 0; padding: .85rem 1rem; color: #c8ebff; background: #102b48; border: 1px solid #2d5c88; border-radius: .55rem; }.notice.error { color: #ffe0e0; background: #44222b; border-color: #984956; }.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }.guide-grid article { padding: 1rem 1.1rem; background: rgba(15,25,44,.7); border-left: 3px solid #4e83ad; }.guide-grid h3 { margin: 0; font-size: 1rem; }.guide-grid p { font-size: .88rem; margin-bottom: 0; }.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }.card pre { margin: .8rem 0 0; overflow: auto; border-radius: .45rem; padding: .8rem; background: #08111f; color: #dbeafe; font: .8rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }.result-actions { align-items: center; }.result-actions form { margin: 0; }.error-page { max-width: 46rem; padding: 6rem 0; }.error-page > p:not(.eyebrow) { font-size: 1.1rem; color: #cbd5e1; margin-bottom: 2rem; }
 .property-essential-label.hidden, .metadata-essential-label.hidden { display: grid !important; visibility: hidden; }.otp-heading { max-width: 50rem; }.otp-card { max-width: 52rem; }.otp-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }.otp-code { margin: .2rem 0 0; color: #e0f2fe; font: 800 clamp(3rem, 10vw, 6rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }.otp-countdown { color: #7dd3fc; font-weight: 700; white-space: nowrap; }.otp-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid #2d3d5c; }.otp-details div { display: grid; grid-template-columns: 8rem 1fr; gap: .7rem; padding: .45rem 0; border-bottom: 1px solid #253653; }.otp-details dt { color: #94a3b8; }.otp-details dd { margin: 0; overflow-wrap: anywhere; }.otp-warning { margin-bottom: 0; }
@media (max-width: 1000px) { .workbench-grid { grid-template-columns: 1fr; }.json-card textarea { min-height: 23rem; }.hero { align-items: flex-start; flex-direction: column; }.lab-facts { width: 100%; }.constraint-grid { grid-template-columns: 1fr 1fr; }.property-row { grid-template-columns: 1fr 1fr; }.constraint-values { grid-column: 1 / -1; }.guide-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .page-shell { width: min(100% - 1rem, 1480px); }.site-header { padding: 1rem 0; }.site-header p { display: none; }.site-nav { width: 100%; justify-content: space-between; }.card-heading, .factor-card header, .group-card header, .properties-heading { flex-direction: column; }.preset-control { width: 100%; }.builder-options, .constraint-grid, .property-row, .result-grid, .otp-details { grid-template-columns: 1fr; }.property-essential-label.hidden, .metadata-essential-label.hidden { display: none !important; }.delivery-control { display: grid; }.delivery-control legend { float: none; }.factor-card header > div:first-child, .group-card header > div:first-child { align-items: flex-start; flex-direction: column; gap: .35rem; }.row-actions { width: 100%; }.nested-children { margin-left: .1rem; padding-left: .55rem; }.json-card textarea { min-height: 19rem; }.otp-card-heading { align-items: flex-start; flex-direction: column; }.otp-code { font-size: clamp(2.5rem, 18vw, 4.5rem); } }