:root{--ink:#1d2433;--muted:#667085;--paper:#fff9df;--panel:#fffdf2;--line:#2c2c2c;--yellow:#f7c948;--coral:#f96f7e;--green:#42c993;--purple:#8b74ff;--blue:#57b7ff;--shadow:0 16px 40px rgba(51,39,11,0.14)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:radial-gradient(circle at 16px 16px,rgba(247,201,72,.18) 0 2px,transparent 2px 28px),linear-gradient(135deg,#fff8d8,#ffefd7 46%,#f2ffeb);font-family:Trebuchet MS,Avenir Next,Verdana,sans-serif}button,select{font:inherit}button{cursor:pointer}.page-shell{width:min(1200px,calc(100% - 32px));margin:0 auto;padding:22px 0 48px}.site-header{position:-webkit-sticky;position:sticky;top:12px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:30px;padding:10px 12px;border:2px solid rgba(29,36,51,.12);border-radius:8px;background:rgba(255,253,242,.9);box-shadow:0 8px 20px rgba(29,36,51,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:900;text-decoration:none}.brand-mark{display:inline-grid;flex:0 0 auto;width:40px;height:40px;place-items:center}.brand-mark img{display:block;width:40px;height:40px;object-fit:contain}.top-nav{display:flex;gap:8px}.top-nav a{padding:8px 10px;border-radius:8px;color:var(--ink);font-size:.92rem;font-weight:800;text-decoration:none}.top-nav a:hover{background:#ffe3a6}.content-section,.hero-section{margin:26px 0}.hero-copy{max-width:860px;margin:0 auto 22px;text-align:center}.eyebrow,.section-kicker{margin:0 0 8px;color:#9b4d00;font-weight:900;letter-spacing:0;text-transform:uppercase}h1,h2,h3,p{overflow-wrap:anywhere}h1{max-width:980px;margin:0 auto;font-family:Georgia,Times New Roman,serif;font-size:clamp(2.3rem,5vw,5rem);line-height:.96;text-shadow:3px 3px 0 #ffcf4d}h1,h2{letter-spacing:0}h2{margin:0 0 14px;font-size:clamp(1.45rem,2vw,2.2rem);line-height:1.05}h3{margin:0 0 10px;font-size:1rem;line-height:1.2}.hero-subtitle,.panel p,.section-note{color:var(--muted);line-height:1.55}.hero-subtitle{max-width:760px;margin:18px auto 0;font-size:1.08rem}.step-strip{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:10px;gap:10px;margin:0 0 22px;padding:0;list-style:none}.step-strip li{min-width:0}.step-link{display:flex;min-height:62px;align-items:center;gap:9px;padding:10px;border:2px solid var(--line);border-radius:8px;background:#fffef7;color:var(--ink);font-weight:900;text-decoration:none;box-shadow:4px 4px 0 var(--line)}.step-link:hover{background:#ffe3a6;transform:translateY(-1px)}.step-link:focus-visible{outline:4px solid var(--blue);outline-offset:3px}.step-link span{display:grid;flex:0 0 auto;width:30px;height:30px;place-items:center;border-radius:8px;background:var(--coral);color:#fff}.content-section,.jump-target{scroll-margin-top:108px}.relationship-section,.tool-grid,.two-column-section{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);grid-gap:18px;gap:18px;align-items:start}.panel{border:2px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:var(--shadow),5px 5px 0 var(--line);padding:20px}.control-panel{background:linear-gradient(180deg,#fffdf2,#fff5bf)}.chart-panel{background:#f8fff7}.field-group{display:grid;grid-gap:8px;gap:8px;margin:16px 0}label{font-weight:900}select{width:100%;min-height:46px;padding:10px 12px;border:2px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-weight:800}.action-row,.segmented,.view-toggle{display:flex;flex-wrap:wrap;gap:8px}.primary-button,.secondary-button,.segmented button,.text-button,.view-toggle button{display:inline-flex;min-height:42px;align-items:center;justify-content:center;gap:8px;border:2px solid var(--line);border-radius:8px;font-weight:900}.segmented button,.view-toggle button{flex:1 1;padding:8px 10px;background:#fff}.segmented button.active,.view-toggle button.active{background:var(--blue);box-shadow:3px 3px 0 var(--line)}.primary-button,.secondary-button{padding:10px 14px}.primary-button{background:var(--green);color:#072416;box-shadow:4px 4px 0 var(--line)}.secondary-button{background:#fff;color:var(--ink)}.text-button{width:100%;margin-top:12px;background:#fff1a8;color:#5b3600}.share-card{position:relative;overflow:hidden;border:2px solid var(--line);border-radius:8px;background:var(--soft,#fff9df);box-shadow:5px 5px 0 var(--line);padding:18px}.share-card:after{content:"";position:absolute;right:-34px;bottom:-34px;width:120px;height:120px;border:16px solid color-mix(in srgb,var(--accent,#f7c948) 62%,white);transform:rotate(12deg);opacity:.45}.card-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:6px 10px;border:2px solid var(--line);border-radius:8px;background:var(--accent,var(--yellow));font-weight:900}.card-badge,.share-card h3{position:relative;z-index:1}.share-card h3{margin-bottom:4px;font-size:clamp(1.35rem,2.2vw,2rem)}.alias,.small-note{position:relative;z-index:1;margin:0 0 12px;color:#505c6e;font-size:.92rem;font-weight:800}.setup-lines{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);grid-gap:8px;gap:8px}.range-grid div,.score-grid div,.setup-lines div{display:grid;grid-gap:4px;gap:4px;min-width:0;padding:10px;border:2px solid rgba(29,36,51,.18);border-radius:8px;background:rgba(255,255,255,.72)}.range-grid span,.score-grid span,.setup-lines span{color:var(--muted);font-size:.78rem;font-weight:900}.range-grid strong,.score-grid strong,.setup-lines strong{font-size:1.25rem}.setup-lines em{color:#5b6474;font-size:.76rem;font-style:normal;font-weight:900}.valid-ranges{margin-top:12px;padding:14px;border:2px dashed #9a7b11;border-radius:8px;background:#fff8ce}.range-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:8px;gap:8px}.slider-editor{display:grid;grid-gap:12px;gap:12px}.slider-row{display:grid;grid-template-columns:150px 1fr;grid-gap:12px;gap:12px;align-items:center;padding:10px;border:2px solid rgba(29,36,51,.12);border-radius:8px;background:#fff8ce}.muted-slider{background:#f1f4f9}.slider-label{display:grid;grid-gap:2px;gap:2px}.slider-label span{color:var(--muted);font-size:.8rem;font-weight:800}.slider-buttons{display:grid;grid-template-columns:repeat(8,minmax(28px,1fr));grid-gap:6px;gap:6px}.slider-buttons button{display:grid;min-height:32px;place-items:center;border:2px solid rgba(29,36,51,.18);border-radius:7px;background:#f0b85d;color:#3a2603;font-size:.78rem;font-weight:900}.slider-buttons button:nth-child(-n+4){background:#8ae0a7}.slider-buttons button.selected{border-color:var(--line);background:var(--coral);color:#fff;box-shadow:2px 2px 0 var(--line)}.result-panel{background:#eef9ff}.score-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:10px;gap:10px;margin:16px 0}.note{margin-bottom:0;padding:12px;border:2px solid #62a3c7;border-radius:8px;background:#ddf4ff;font-weight:900}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}.personality-chart-shell{display:grid;grid-gap:12px;gap:12px}.chart-legend{display:flex;flex-wrap:wrap;gap:8px}.chart-legend span{display:inline-flex;min-width:0;align-items:center;gap:7px;padding:7px 9px;border:2px solid rgba(29,36,51,.18);border-radius:8px;background:rgba(255,255,255,.74);color:var(--ink);font-size:.82rem;font-weight:900}.chart-legend strong{display:grid;flex:0 0 auto;min-width:28px;height:28px;place-items:center;border:2px solid var(--line);border-radius:8px;background:var(--yellow);color:var(--ink);font-size:.78rem}.chart-legend span:nth-child(2) strong{background:var(--blue)}.personality-chart{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-gap:10px;gap:10px}.chart-connector{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none}.connector-line,.connector-shadow{vector-effect:non-scaling-stroke}.connector-shadow{stroke:#fffdf2;stroke-linecap:round;stroke-width:12}.connector-line{stroke:var(--line);stroke-dasharray:10 8;stroke-linecap:round;stroke-width:5}.personality-chart button{position:relative;z-index:1;grid-column:calc(var(--x) + 1);grid-row:calc(var(--y) + 1);min-height:120px;padding:12px;border:2px solid var(--border);border-radius:8px;background:var(--soft);color:var(--ink);text-align:left;box-shadow:4px 4px 0 var(--border);transition:box-shadow .14s ease,outline-color .14s ease,transform .14s ease}.personality-chart.compare-active button:not(.primary-match):not(.secondary-match):not(.dual-match){opacity:.42;filter:saturate(.72)}.personality-chart.compact button{min-height:82px}.personality-chart button.primary-match{z-index:4;outline:4px solid var(--line);border-color:#9b6b00;background:color-mix(in srgb,var(--yellow) 46%,var(--soft));box-shadow:0 0 0 4px var(--yellow),6px 6px 0 var(--line);transform:translateY(-2px)}.personality-chart button.secondary-match{z-index:4;outline:4px dashed var(--line);border-color:#147bb0;background:color-mix(in srgb,var(--blue) 44%,var(--soft));box-shadow:0 0 0 4px var(--blue),6px 6px 0 var(--line);transform:translateY(-2px)}.personality-chart button.dual-match{z-index:4;outline:4px solid var(--line);border-color:var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--yellow) 52%,var(--soft)) 0 50%,color-mix(in srgb,var(--blue) 50%,var(--soft)) 50% 100%);box-shadow:inset 0 0 0 4px var(--blue),0 0 0 5px var(--yellow),6px 6px 0 var(--line);transform:translateY(-2px)}.chart-marker{position:absolute;top:-12px;right:-12px;z-index:5;display:inline-grid;min-width:38px;height:38px;place-items:center;padding:0 9px;border:3px solid var(--line);border-radius:8px;background:var(--yellow);color:var(--ink);font-size:.88rem;font-style:normal;font-weight:900;line-height:1;box-shadow:3px 3px 0 var(--line)}.secondary-match .chart-marker{background:var(--blue)}.dual-match .chart-marker{background:linear-gradient(90deg,var(--yellow) 0 50%,var(--blue) 50% 100%)}.personality-chart span{display:inline-block;margin-bottom:8px;padding:4px 7px;border-radius:7px;background:var(--accent);font-size:.75rem;font-weight:900}.personality-chart strong{display:block;font-size:1rem;line-height:1.15}.personality-list{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:10px;gap:10px}.personality-list button{display:grid;grid-gap:6px;gap:6px;padding:14px;border:2px solid var(--accent);border-radius:8px;background:var(--soft);color:var(--ink);text-align:left}.personality-list button.selected{outline:4px solid var(--line)}.personality-list span{color:var(--muted);font-size:.88rem;line-height:1.35}.relationship-pickers{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:12px;gap:12px;margin:16px 0}.relationship-pickers label{display:grid;grid-gap:8px;gap:8px}.relationship-card.easy{--accent:var(--green);--soft:#dcffe8}.relationship-card.balanced{--accent:var(--blue);--soft:#e2f5ff}.relationship-card.complementary{--accent:var(--yellow);--soft:#fff4bc}.relationship-card.contrast{--accent:var(--coral);--soft:#ffe0e3}.relationship-card.unpredictable{--accent:var(--purple);--soft:#e7e1ff}.pairing{font-weight:900}.name-table-wrapper{overflow-x:auto;border:2px solid var(--line);border-radius:8px;background:#fffef7;box-shadow:5px 5px 0 var(--line)}.name-table{width:100%;min-width:700px;border-collapse:collapse}.name-table td,.name-table th{padding:12px 14px;border-bottom:2px solid rgba(29,36,51,.12);text-align:left}.name-table th{background:#ffe179}.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:12px;gap:12px}.faq-card{padding:16px;border:2px solid rgba(29,36,51,.16);border-radius:8px;background:#fffef7}.faq-card p{margin:0;color:var(--muted);line-height:1.5}.site-footer{margin-top:32px;padding:20px;border:2px solid var(--line);border-radius:8px;background:#1f2937;color:#fffdf2}.site-footer p{color:#d7dce6;line-height:1.55}@media (max-width:900px){.page-shell{width:min(100% - 20px,680px)}.site-header{align-items:stretch;flex-direction:column;position:static}.top-nav{justify-content:space-between}.faq-grid,.personality-list,.relationship-section,.step-strip,.tool-grid,.two-column-section{grid-template-columns:1fr}.step-strip{display:flex;overflow-x:auto;padding-bottom:8px}.step-link{min-width:178px}.range-grid,.setup-lines{grid-template-columns:repeat(2,1fr)}.personality-chart{gap:7px}.personality-chart button{min-height:86px;padding:8px;box-shadow:2px 2px 0 var(--border)}.personality-chart strong{font-size:.82rem}.personality-chart span{font-size:.62rem}.slider-row{grid-template-columns:1fr}.section-heading{align-items:stretch;flex-direction:column}}@media (max-width:520px){h1{font-size:2.55rem}.panel{padding:14px}.range-grid,.relationship-pickers,.score-grid,.setup-lines{grid-template-columns:1fr}.slider-buttons{grid-template-columns:repeat(4,1fr)}.personality-chart.full{overflow-x:auto;grid-template-columns:repeat(4,minmax(108px,1fr))}}