:root{--ink:#183d37;--muted:#626b61;--paper:#f8f7f1;--line:#dcded2;--accent:#d6ddbf;--white:#fffefa}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Hiragino Kaku Gothic ProN','Noto Sans JP',Meiryo,sans-serif;font-size:16px;line-height:1.9}a{color:inherit;text-underline-offset:5px}button,input,textarea{font:inherit;color:inherit}button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #936c35;outline-offset:4px}.skip{position:fixed;top:-100px;background:var(--white);padding:10px;z-index:10}.skip:focus{top:0}.header{max-width:1180px;margin:auto;padding:30px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-family:serif;font-size:25px;letter-spacing:5px;line-height:1.2}.brand span{display:block;font-family:sans-serif;font-size:9px;letter-spacing:3px;margin-top:9px}nav{display:flex;gap:32px;font-size:13px}nav a{text-decoration:none}main{max-width:1080px;margin:auto;padding:0 32px}.hero{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:40px;padding:80px 0 74px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:600;margin:0 0 20px;color:var(--muted)}h1,h2,.tagline{font-family:'Hiragino Mincho ProN','Yu Mincho',serif;font-weight:500}h1{font-size:clamp(30px,3.5vw,44px);line-height:1.6;letter-spacing:1px;margin:0 0 24px}h2{font-size:28px;line-height:1.65;margin:0 0 18px}h3{font-size:18px;line-height:1.7;margin:0 0 16px}p{margin:0 0 18px}.lead{font-size:18px;margin-bottom:20px}.hero p:not(.eyebrow){color:var(--muted)}.textlink{display:inline-flex;gap:40px;font-size:14px;margin-top:20px;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:8px}.hero-art{position:relative;height:380px;max-width:370px;width:100%;margin:auto;border-radius:180px 180px 8px 8px;background:#e9eddf;overflow:hidden}.orbit{position:absolute;border:1px solid #c2cbae;width:330px;height:330px;border-radius:50%}.o1{left:65px;top:65px}.o2{left:-135px;top:175px}.sun{position:absolute;left:200px;top:58px;width:90px;height:90px;border-radius:50%;background:#dfc394}.leaf{position:absolute;background:#627b62;border-radius:100% 0 100% 0;transform:rotate(-20deg)}.l1{width:120px;height:200px;left:100px;top:133px}.l2{width:90px;height:140px;left:164px;top:195px;background:#9aaa81;transform:rotate(55deg)}.hero-art span{position:absolute;bottom:28px;left:28px;font-family:serif;font-size:13px;letter-spacing:3px;line-height:1.9}.panel{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:38px 42px}.entry{margin-bottom:70px}.form-row{display:flex;gap:16px;margin-top:8px;align-items:stretch}label{display:block;font-size:14px}input,textarea{border:1px solid #adb6a7;border-radius:6px;padding:12px;background:white;min-width:0}input[type=date]{flex:1;width:100%;min-height:54px}textarea{width:100%;resize:vertical;margin-top:8px}.primary,.secondary{border-radius:6px;padding:12px 22px;border:1px solid var(--ink);line-height:1.6}.primary{background:var(--ink);color:var(--white)}.primary span{margin-left:18px}.primary:hover{background:#28534a}.secondary{background:transparent;border-color:var(--line)}.secondary:hover,.secondary[aria-pressed=true]{background:var(--accent);border-color:#93a67b}.small{font-size:12px;color:var(--muted);line-height:1.85}#birth-note{margin:12px 0 0}.error{color:#aa3c32;font-size:14px;margin:10px 0 0}.error:empty{display:none}.result{margin-bottom:72px}.result-head{display:flex;align-items:center;justify-content:space-between;gap:30px}.result-head h2{font-size:34px}.tagline{font-size:23px}.result-mark{flex-shrink:0;border-radius:50%;width:110px;height:110px;background:var(--accent);display:grid;place-items:center;font:42px serif}.disclosure{font-size:12px;color:var(--muted);border-left:2px solid #a9b698;padding-left:14px;margin:14px 0 30px}.intro{max-width:850px;font-size:17px}.section-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0}.type-section{border-top:1px solid var(--line);padding:24px 18px 4px 0}.type-section h3{font-size:16px}.type-section p{font-size:15px;color:var(--muted)}.questions{margin-bottom:24px}.buttons{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.buttons button{font-size:14px}.theme-question{font-size:18px;margin:26px 0 18px}.money-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px}.money-inputs input{width:100%;margin-top:8px}.money-inputs+p{margin-top:20px}details{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}summary{cursor:pointer;font-size:14px;font-weight:600;margin-bottom:16px}details p{font-size:14px}.memo-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}.symbols{margin:70px 0}.symbol-list{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:28px}.symbol-button{border:1px solid var(--line);background:var(--white);border-radius:8px;padding:22px 10px;display:flex;flex-direction:column;align-items:center;gap:6px}.symbol-button:hover{background:#eef1e5;border-color:#8f9d84}.symbol-icon{font:26px serif;color:#657b5b}.symbol-button strong{font-size:15px;font-weight:500}.symbol-button .small{font-size:10px}.about{margin-bottom:80px}.about>p:not(.eyebrow){max-width:790px}footer{border-top:1px solid var(--line);max-width:1180px;margin:auto;padding:36px 32px;display:flex;justify-content:space-between;align-items:center;gap:30px}footer p,footer small{font-size:11px;color:var(--muted);margin:0}[hidden]{display:none!important}@media(max-width:700px){.header{padding:22px 20px}nav{gap:16px;font-size:11px}.brand{font-size:22px}main{padding:0 20px}.hero{grid-template-columns:1fr;padding:45px 0;gap:30px}h1{font-size:30px}.hero-art{height:200px;max-width:none;border-radius:100px 100px 8px 8px}.sun{left:70%;top:25px;width:65px;height:65px}.l1{left:45%;top:30px;width:75px;height:140px}.l2{left:60%;top:75px;width:65px;height:95px}.hero-art span{bottom:24px}.panel{padding:26px 22px}.form-row{flex-direction:column}.primary{min-height:50px}h2{font-size:24px}.result-head{gap:14px}.result-head h2{font-size:26px}.tagline{font-size:19px}.result-mark{width:64px;height:64px;font-size:28px}.section-grid,.memo-fields,.money-inputs{grid-template-columns:1fr}.type-section{padding-top:20px}.symbol-list{grid-template-columns:repeat(2,1fr)}.symbol-button:last-child{grid-column:auto}.symbols{margin:48px 0}.entry{margin-bottom:48px}.about{margin-bottom:45px}footer{padding:30px 20px;flex-direction:column;align-items:flex-start;gap:20px}.theme-question{font-size:16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Mobile layout correction, v0.1.1 */
@media (max-width: 700px) {
  /* Keep Japanese headings readable on narrow screens. */
  h1,
  h2,
  .tagline {
    text-wrap: balance;
    line-break: strict;
    overflow-wrap: anywhere;
  }

  .hero h1 {
    font-size: clamp(20px, 5.6vw, 30px);
    letter-spacing: 0.02em;
    line-height: 1.7;
  }

  .entry h2,
  .about h2,
  .symbols h2 {
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.7;
  }

  /* Allow form controls and text to shrink to the available width. */
  .hero > div,
  .result-head > div,
  .form-row,
  .memo-fields > label,
  .money-inputs > label {
    min-width: 0;
  }

  .form-row {
    width: 100%;
    max-width: 100%;
  }

  input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
    min-height: 54px;
    padding: 12px;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
  }

  input[type="date"]::-webkit-date-and-time-value {
    min-width: 0;
    min-height: 1.5em;
    text-align: left;
  }

  input[type="date"]::-webkit-datetime-edit {
    min-width: 0;
    padding: 0;
  }
}


/* Result heading correction, v0.1.2 */
.result-meta-item {
  display: inline-block;
}
.result-meta-item + .result-meta-item {
  margin-left: 1em;
}

@media (max-width: 700px) {
  .result-head {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 20px;
  }

  .result-head > div:first-child {
    width: 100%;
    min-width: 0;
  }

  .result-mark {
    align-self: flex-start;
  }

  .result-meta-item {
    display: block;
  }

  .result-meta-item + .result-meta-item {
    margin-left: 0;
    margin-top: 4px;
  }

  .result-head h2 {
    line-height: 1.6;
    text-wrap: wrap;
  }

  .result-title-part,
  .tagline-part {
    display: block;
  }

  .result-head .tagline {
    line-height: 1.8;
    text-wrap: wrap;
  }
}