:root {
  --ink: #18221f;
  --muted: #69736f;
  --paper: #fbfaf6;
  --card: #ffffff;
  --line: #dde2dc;
  --green: #1f7358;
  --green-dark: #15533f;
  --green-soft: #e6f4ed;
  --lime: #d8ef8c;
  --orange: #f09a5b;
  --cream: #f3efe4;
  --danger: #b94343;
  --shadow: 0 24px 70px rgba(35, 53, 46, .12);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: 'DM Sans', sans-serif; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.ambient { position: fixed; border-radius: 50%; filter: blur(2px); opacity: .35; pointer-events: none; z-index: -1; }
.ambient-one { width: 420px; height: 420px; left: -260px; top: 180px; background: #d7eccd; }
.ambient-two { width: 500px; height: 500px; right: -330px; bottom: -180px; background: #f6d5b8; }

.site-header { height: 76px; max-width: 1240px; margin: auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 15px/1 'Manrope', sans-serif; letter-spacing: .1em; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--green); color: white; font-size: 16px; letter-spacing: 0; transform: rotate(-4deg); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.save-state { color: var(--muted); font-size: 12px; margin-right: 6px; }
.button { border: 0; border-radius: 11px; padding: 12px 18px; font-weight: 700; cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-1px); }
.button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(31,115,88,.2); outline-offset: 2px; }
.button-primary { background: var(--green); color: white; box-shadow: 0 8px 20px rgba(31,115,88,.2); }
.button-primary:hover { background: var(--green-dark); }
.button-dark { background: var(--ink); color: white; }
.button-quiet { background: transparent; border: 1px solid var(--line); }
.button-small { padding: 9px 13px; font-size: 13px; }
.button-large { padding: 16px 24px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }

.hero { max-width: 1120px; margin: 0 auto; min-height: calc(100vh - 76px); padding: 75px 28px 100px; text-align: center; position: relative; overflow: hidden; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow > span { width: 7px; height: 7px; background: var(--orange); border-radius: 50%; }
.hero h1, .results-heading h1 { margin: 18px auto 20px; max-width: 900px; font: 800 clamp(48px, 7vw, 82px)/.98 'Manrope', sans-serif; letter-spacing: -.055em; }
.hero h1 em { color: var(--green); font-style: normal; position: relative; }
.hero h1 em::after { content: ''; position: absolute; left: 2%; right: 0; bottom: -9px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='10' viewBox='0 0 300 10'%3E%3Cpath d='M2 7C69 1 220 1 298 5' fill='none' stroke='%23f09a5b' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.hero-copy { max-width: 650px; margin: 30px auto 28px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; }
.time-note { color: var(--muted); font-size: 12px; }
.hero-proof { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 34px 0 70px; color: #7b837f; font-size: 12px; }
.hero-proof i { width: 3px; height: 3px; background: #aeb5b0; border-radius: 50%; }
.preview-stack { width: min(760px, 86%); height: 320px; margin: auto; position: relative; perspective: 1000px; }
.preview-card { position: absolute; left: 50%; width: 72%; padding: 25px 28px; border-radius: 18px; background: white; border: 1px solid rgba(33,57,48,.1); box-shadow: var(--shadow); text-align: left; }
.preview-back { transform: translateX(-50%) rotate(-7deg) translate(-110px, 38px); top: 35px; height: 190px; background: #efe7d6; }
.preview-mid { transform: translateX(-50%) rotate(7deg) translate(105px, 25px); top: 25px; height: 210px; background: #e4f0d5; }
.preview-back span, .preview-mid span { display: block; color: var(--green); font-weight: 800; margin-bottom: 14px; }
.preview-front { transform: translateX(-50%); top: 0; z-index: 2; min-height: 270px; }
.preview-card-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.status-dot { color: var(--green); }
.preview-front h2 { font: 800 27px 'Manrope', sans-serif; margin: 26px 0 8px; }
.preview-front p { max-width: 500px; color: var(--muted); line-height: 1.5; }
.fake-lines { margin-top: 25px; display: grid; gap: 9px; }
.fake-lines i { display: block; height: 7px; border-radius: 10px; background: #e5e8e4; }
.fake-lines i:nth-child(2) { width: 91%; }.fake-lines i:nth-child(3) { width: 78%; }.fake-lines i:nth-child(4) { width: 88%; }

.builder-shell { max-width: 1180px; min-height: calc(100vh - 100px); margin: 25px auto 70px; padding: 0 28px; display: grid; grid-template-columns: 255px minmax(0, 1fr); gap: 26px; align-items: stretch; }
.progress-panel { padding: 30px 20px 20px; display: flex; flex-direction: column; }
.progress-kicker { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.progress-meter { height: 5px; background: #e2e5df; border-radius: 10px; margin-top: 14px; overflow: hidden; }
.progress-meter span { display: block; height: 100%; width: 14%; background: var(--green); border-radius: inherit; transition: width .3s ease; }
.progress-panel > div > p { color: var(--muted); font-size: 12px; }.progress-panel > div > p strong { color: var(--ink); }
.step-list { display: grid; gap: 7px; margin-top: 22px; }
.step-link { display: grid; grid-template-columns: 29px 1fr; gap: 11px; align-items: center; padding: 10px; border-radius: 10px; color: #7c8480; font-size: 13px; background: transparent; border: 0; text-align: left; cursor: pointer; }
.step-link i { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #ccd2cc; border-radius: 50%; font-style: normal; font-size: 11px; }
.step-link.active { background: white; color: var(--ink); font-weight: 700; box-shadow: 0 8px 24px rgba(38,55,49,.07); }.step-link.active i { background: var(--green); color: white; border-color: var(--green); }
.step-link.complete i { background: var(--green-soft); color: var(--green); border-color: transparent; }
.privacy-note { margin-top: auto; display: flex; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.privacy-note > span { color: var(--green); }.privacy-note strong, .privacy-note small { display: block; }.privacy-note strong { font-size: 12px; }.privacy-note small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.wizard-card { min-width: 0; min-height: 700px; display: flex; background: white; border: 1px solid rgba(31,53,45,.1); border-radius: var(--radius); box-shadow: var(--shadow); }
#wizardForm { width: 100%; display: flex; flex-direction: column; }
.step { display: none; padding: 55px clamp(28px, 7vw, 72px) 30px; animation: fadeSlide .25s ease; }
.step.active { display: block; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(7px); } }
.step-number { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.step h2 { margin: 10px 0 8px; font: 800 clamp(28px,4vw,40px)/1.12 'Manrope', sans-serif; letter-spacing: -.035em; }
.step-intro { margin: 0 0 30px; color: var(--muted); line-height: 1.55; }
.wizard-footer { margin-top: auto; padding: 20px 30px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.autosave-note { color: var(--muted); font-size: 11px; }

.preset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.preset-card { min-height: 90px; padding: 17px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 14px; background: white; text-align: left; cursor: pointer; }
.preset-card:hover { border-color: #9eb9ac; background: #fbfdfb; }.preset-card.selected { border: 2px solid var(--green); background: var(--green-soft); }
.preset-card i { display: grid; place-items: center; flex: 0 0 39px; height: 39px; border-radius: 11px; background: var(--cream); color: var(--green); font: 800 15px 'Manrope'; font-style: normal; }
.preset-card strong, .preset-card small { display: block; }.preset-card strong { font-size: 14px; }.preset-card small { color: var(--muted); margin-top: 3px; font-size: 11px; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.full { grid-column: 1/-1; }.top-gap { margin-top: 25px; }
.field { display: grid; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field > span, .field legend, .choice-grid legend { font-size: 12px; font-weight: 700; }.field b { color: var(--orange); }.field small, .choice-grid legend small { color: var(--muted); font-weight: 400; }
input, textarea, select { width: 100%; color: var(--ink); background: #fbfcfa; border: 1px solid #d8ddd7; border-radius: 10px; padding: 12px 13px; transition: border .18s, box-shadow .18s; }
textarea { resize: vertical; line-height: 1.5; } input::placeholder, textarea::placeholder { color: #a2aaa5; }
input:focus, textarea:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,115,88,.08); outline: 0; }
.invalid { border-color: var(--danger) !important; }.field-error { color: var(--danger); font-size: 12px; min-height: 16px; }
.segmented { display: grid; gap: 7px; padding: 5px; margin: 0 0 25px; border: 1px solid var(--line); border-radius: 12px; background: #f5f6f3; }.two-up { grid-template-columns: 1fr 1fr; }
.segmented input, .chip-options input, .choice-grid input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label span { display: block; padding: 11px; border-radius: 8px; text-align: center; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.segmented input:checked + span { background: white; color: var(--ink); box-shadow: 0 2px 8px rgba(24,34,31,.08); }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border: 0; padding: 0; margin: 0; }.choice-grid legend { grid-column: 1/-1; margin-bottom: 7px; }
.choice-grid label span { min-height: 48px; padding: 12px 10px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; text-align: center; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.choice-grid input:checked + span { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); box-shadow: inset 0 0 0 1px var(--green); }
.compact-field { margin-top: 25px; }.chip-options { display: flex; gap: 8px; }.chip-options label span { display: block; min-width: 50px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; text-align: center; cursor: pointer; font-size: 12px; font-weight: 700; }.chip-options input:checked + span { color: white; background: var(--green); border-color: var(--green); }.small-input { width: 100px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 0; border-bottom: 1px solid #ecefe9; cursor: pointer; }.toggle-row input { position: absolute; opacity: 0; width: 1px; }.toggle-row strong, .toggle-row small { display: block; }.toggle-row strong { font-size: 13px; }.toggle-row small { color: var(--muted); font-size: 11px; margin-top: 4px; }.toggle-row i { position: relative; flex: 0 0 40px; height: 23px; border-radius: 20px; background: #cfd4cf; transition: .2s; }.toggle-row i::after { content: ''; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: .2s; }.toggle-row input:checked + i { background: var(--green); }.toggle-row input:checked + i::after { transform: translateX(17px); }
.money-input { display: grid; grid-template-columns: 92px 1fr; }.money-input select { border-radius: 10px 0 0 10px; border-right: 0; }.money-input input { border-radius: 0 10px 10px 0; }
.check-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; color: var(--muted); font-size: 12px; }.check-stack input { width: auto; accent-color: var(--green); }
.scoreboard-preview { margin-top: 22px; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }.scoreboard-preview div { padding: 13px; background: #f8faf7; }.scoreboard-preview span, .scoreboard-preview strong { display: block; }.scoreboard-preview span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }.scoreboard-preview strong { margin-top: 5px; font-size: 14px; }
.autonomy-range { padding: 0; accent-color: var(--green); }.range-labels { display: grid; grid-template-columns: repeat(4,1fr); margin: 7px 0 20px; color: var(--muted); font-size: 9px; text-align: center; }.range-labels span:first-child { text-align: left; }.range-labels span:last-child { text-align: right; }
.autonomy-card { padding: 20px; border-radius: 14px; background: var(--green-soft); border-left: 4px solid var(--green); }.autonomy-card h3 { margin: 0 0 6px; font: 800 18px 'Manrope'; }.autonomy-card p { margin: 0; color: #466158; font-size: 12px; line-height: 1.55; }
.personality-grid { grid-template-columns: repeat(5,1fr); }
.review-summary, .result-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.summary-item { padding: 15px; border: 1px solid var(--line); border-radius: 11px; }.summary-item span, .summary-item strong { display: block; }.summary-item span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.summary-item strong { margin-top: 5px; font-size: 12px; line-height: 1.4; }
.quality-panel { margin-top: 24px; padding: 20px; background: #f6f8f4; border-radius: 14px; }.quality-panel > div:first-child { display: flex; justify-content: space-between; font-size: 12px; }.quality-track { height: 7px; border-radius: 10px; background: #dfe4de; margin: 12px 0; overflow: hidden; }.quality-track i { display: block; height: 100%; background: var(--green); border-radius: inherit; transition: width .3s; }.quality-panel p { margin: 0; color: var(--muted); font-size: 11px; }

.results { max-width: 1120px; margin: 40px auto 90px; padding: 0 28px; }.results-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; }.results-heading h1 { margin: 15px 0; max-width: 760px; font-size: clamp(38px,5.5vw,64px); }.results-heading p { max-width: 700px; color: var(--muted); line-height: 1.6; }.score-ring { flex: 0 0 115px; height: 115px; display: grid; place-content: center; text-align: center; border: 8px solid var(--green-soft); border-top-color: var(--green); border-radius: 50%; }.score-ring strong, .score-ring span { display: block; }.score-ring strong { font: 800 24px 'Manrope'; }.score-ring span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.result-summary { grid-template-columns: repeat(7,1fr); margin: 35px 0; }.result-summary .summary-item { background: white; }
.output-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); }.tabs { display: flex; gap: 4px; }.tab { padding: 14px 13px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }.tab.active { color: var(--green); border-bottom-color: var(--green); }.output-actions { display: flex; gap: 6px; }
.prompt-panel { margin-top: 20px; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }.prompt-heading { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; border-bottom: 1px solid var(--line); }.prompt-heading span { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.prompt-heading h2 { margin: 5px 0 0; font: 800 22px 'Manrope'; }.button-copy { background: var(--green-soft); color: var(--green-dark); font-size: 12px; }.prompt-panel pre { max-height: 590px; margin: 0; padding: 30px; overflow: auto; white-space: pre-wrap; word-wrap: break-word; font: 13px/1.72 ui-monospace, SFMono-Regular, Menlo, monospace; color: #26332e; background: #fdfdfb; }.result-footnote { color: var(--muted); text-align: center; font-size: 10px; margin-top: 20px; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 20; transform: translate(-50%, 20px); padding: 11px 17px; border-radius: 10px; background: var(--ink); color: white; opacity: 0; pointer-events: none; font-size: 12px; transition: .25s; }.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 900px) {
  .builder-shell { grid-template-columns: 1fr; }.progress-panel { padding: 15px 5px; }.step-list { grid-template-columns: repeat(7,1fr); gap: 4px; }.step-link { display: block; padding: 3px; }.step-link i { margin: auto; }.step-link span { display: none; }.privacy-note { display: none; }
  .result-summary { grid-template-columns: repeat(4,1fr); }.output-toolbar { align-items: stretch; flex-direction: column; border: 0; }.tabs { overflow-x: auto; border-bottom: 1px solid var(--line); }.output-actions { justify-content: flex-end; }
}
@media (max-width: 650px) {
  .site-header { padding: 0 18px; }.save-state, #loadButton { display: none; }.hero { padding: 50px 18px 70px; }.hero h1 { font-size: 44px; }.hero-actions { flex-direction: column; }.hero-proof { flex-wrap: wrap; margin-bottom: 45px; }.preview-stack { width: 100%; height: 260px; }.preview-card { width: 92%; }.preview-back, .preview-mid { display: none; }
  .builder-shell { margin-top: 5px; padding: 0 10px; }.wizard-card { min-height: 640px; }.step { padding: 35px 20px 25px; }.preset-grid, .field-grid { grid-template-columns: 1fr; }.full { grid-column: auto; }.choice-grid { grid-template-columns: repeat(2,1fr); }.personality-grid { grid-template-columns: repeat(3,1fr); }.wizard-footer { padding: 16px; }.autosave-note { display: none; }
  .scoreboard-preview { grid-template-columns: repeat(2,1fr); }.review-summary { grid-template-columns: repeat(2,1fr); }.results { padding: 0 15px; margin-top: 20px; }.results-heading { align-items: start; }.score-ring { display: none; }.result-summary { grid-template-columns: repeat(2,1fr); }.output-actions { display: grid; grid-template-columns: 1fr 1fr; }.output-actions #editButton { grid-column: 1/-1; }.prompt-heading { padding: 20px; }.prompt-heading h2 { font-size: 18px; }.prompt-panel pre { padding: 20px; font-size: 11px; }.button-copy { padding: 9px; }
}
@media print { .site-header, .output-toolbar, .button, .result-summary, .result-footnote { display: none !important; }.results { margin: 0; }.prompt-panel pre { max-height: none; }.prompt-panel { box-shadow: none; } }