:root{--ink:#292442;--purple:#6b4cc4;--lav:#f0ebfb;--mint:#e7f6ef;--line:#e6e1ef}
body{background:radial-gradient(ellipse at 0 0,#ece5fb,transparent 48%),#f7f8fc}
.wrap{width:min(1000px,calc(100% - 48px));padding:34px 0 110px}
.hero{position:relative;isolation:isolate;overflow:hidden;padding:36px 40px;border:1px solid var(--line);border-radius:32px;background:#eee9f9;margin-bottom:22px}
.brand{font-size:.9rem}.eyebrow{margin-top:26px;color:#786c99}
.hero h1{font-size:clamp(2.4rem,5vw,3.7rem);line-height:1.16;max-width:650px}
.lead{max-width:580px;padding-right:30px;line-height:1.8}
.hero-steps{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.hero-steps span{padding:6px 12px;border-radius:30px;background:#ffffffb8;font-size:.73rem;color:#665880}
.relationship-art{position:absolute;right:38px;top:85px;width:215px;height:185px;z-index:-1}
.relationship-art i{position:absolute;display:grid;place-items:center;width:115px;height:140px;border:3px solid #c4b4e1;background:#dcd0f0;border-radius:28px;font:70px Jua;color:#8d71b4;transform:rotate(-12deg);box-shadow:0 12px 25px #53437115}
.relationship-art i:nth-child(2){right:0;top:30px;background:#c5e4d8;border-color:#95c5af;color:#609b83;transform:rotate(12deg)}
.relationship-art b{position:absolute;left:85px;top:55px;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#fff8e9;color:#ba8c5b;font-size:30px;box-shadow:0 4px 12px #53437115}
.notice{background:#e9f5ef;border-color:#d5e9df;padding:18px 23px;align-items:center;margin-bottom:22px}
.notice p{color:#466759}
.card,.summary,.result-card,.method{box-shadow:0 8px 28px #51407108}
.form-card{padding:32px}.section-title span{width:40px;height:40px;flex-shrink:0;border-radius:14px;background:var(--lav);color:var(--purple)}
.section-title h2{font-size:1.5rem}.student-title{padding-top:26px;border-top:1px solid var(--line);margin-top:28px}
.field input{min-width:0;min-height:48px;background:#fff;font-family:inherit;font-size:1rem;box-shadow:0 2px 4px #42305003}
.field{min-width:0}.birth-fields{gap:16px}.student-row{border:1px solid #ece7f4;padding:15px;background:#faf9fd;gap:12px}
.file-drop{padding:22px;min-height:106px;border-radius:20px;background:#f6fbf8;border-color:#a9cebc}
.file-drop>span{background:#e0efe7;width:40px;height:40px}.file-drop b{font-size:.95rem}.file-drop small{font-size:.8rem}
.file-guide{padding:14px 18px}.primary{padding:19px;border-radius:16px;box-shadow:0 6px 16px #6b4cc422}.primary:hover{background:#593cad}
button:focus-visible,a:focus-visible,summary:focus-visible,.file-drop:focus-within{outline:3px solid #af9bd9;outline-offset:4px}
.text-button{padding:18px 0}.summary{background:linear-gradient(120deg,#eee8f8,#f0faf5);padding:30px}
.result-list{gap:22px}.result-card{padding:28px}.score-visual{padding:22px;min-height:140px}.result-grid{gap:16px}.result-grid section{padding:20px;border:1px solid #ffffffa0}.result-grid p{font-size:.9rem;line-height:1.9}
.result-card header{align-items:center}.relation-dot{padding:7px 13px;white-space:nowrap}.pill{padding:7px 12px}.method{padding:20px 24px}.site-footer{margin-top:36px;padding-top:24px}
@media(min-width:850px){.lead{max-width:640px;padding-right:100px}}
@media(max-width:760px){.wrap{width:calc(100% - 28px);padding-top:16px}.hero{padding:28px 24px;border-radius:26px}.relationship-art{right:5px;top:95px;opacity:.18}.hero h1,.lead{position:relative}.lead{padding-right:0}.form-card{padding:24px 20px}.result-card{padding:22px}.hero-steps{gap:5px}.hero-steps span{font-size:.66rem;padding:5px 9px}}
@media(max-width:450px){.birth-fields{grid-template-columns:1fr}.student-row{grid-template-columns:minmax(0,1fr) 38px}.student-row .birth-time{grid-column:1}.student-row .remove{grid-column:2;grid-row:1 / span 2;align-self:center}.notice{padding:16px;align-items:flex-start}.file-drop{padding:16px}.score-visual{padding:16px 8px}.hero h1{font-size:2.4rem}.result-grid section{padding:16px}}
@media(prefers-reduced-motion:reduce){.animal span{animation:none!important}}