/* ほしよみ絵本: storybook reading. Shares the site palette; koma motion uses held keyframes. */
.hf-section,.hf-result,.hu-results,.hf-again{--hf-ink:#644c6c;--hf-soft:#7c707f;--hf-accent:#a273a9;--hf-rose:#dda4c3;--hf-line:#bf8aa4;--hf-paper:#fffaf3;--hf-lilac:#f3edf7;--hf-ribbon:#a9c6ef;--hf-night:#6b5590}
.hf-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hf-section{position:relative;padding:72px 0 64px;background:radial-gradient(circle at 12% 18%,#fff 0 2px,transparent 3px) 0 0/90px 90px,radial-gradient(circle at 70% 60%,#fff8 0 1.5px,transparent 2.5px) 0 0/130px 130px,linear-gradient(180deg,#f6eef9,#fdf3f8 70%,#fff)}
.hf-inner{position:relative}
.hf-heading{text-align:center;margin-bottom:34px}
.hf-heading>p:last-child{font-size:13px;line-height:2;color:var(--hf-soft);margin-top:12px}
.hf-note{font-size:11px;line-height:1.9;color:#8d8191;text-align:center;margin-top:22px}
.hf-section .hf-note{margin-top:44px}


/* The book: every .hf-page is a two-page spread, all stacked in one grid cell so the
   book keeps a steady size. Only sides marked .is-shown are visible once JS takes over. */
.hf-section{overflow-x:clip}
.hf-book{position:relative;max-width:1000px;margin:0 auto}
.hf-pages{position:relative;display:grid;padding:14px;border-radius:14px 14px 18px 18px;background:#f2b6c8;box-shadow:0 0 0 1px #c98ca9,0 26px 60px #5b3a6a33;perspective:2400px}
.hf-pages::after{content:"";position:absolute;left:calc(50% - 9px);bottom:-36px;width:18px;height:58px;background:var(--hf-ribbon);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);box-shadow:inset -3px 0 0 #8fb0de}
.hf-page{grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;min-width:0}
.hf-side{position:relative;min-width:0;padding:34px 38px 48px}
.hf-side--l{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;border-radius:8px 2px 2px 12px;background:linear-gradient(270deg,#ead9cc 0,#f8efe6 18px,var(--hf-paper) 46px)}
.hf-side--r{border-radius:2px 8px 12px 2px;background:linear-gradient(90deg,#ead9cc 0,#f8efe6 18px,var(--hf-paper) 46px)}
.hf-book.is-enhanced .hf-side{visibility:hidden}
.hf-book.is-enhanced .hf-side.is-shown{visibility:visible}
.hf-book:not(.is-enhanced) .hf-pages{gap:14px}
.hf-book:not(.is-enhanced) .hf-page{grid-area:auto}
.hf-book:not(.is-enhanced) .hf-page--cover{display:none}
.hf-art{width:min(230px,72%)}
.hf-cels{position:relative;display:block;width:100%;pointer-events:none}
.hf-say{position:relative;margin:0;max-width:300px;padding:13px 16px;border:1px solid var(--hf-line);border-radius:20px 24px 22px 18px;background:#fff;color:var(--hf-ink);font:700 13px/1.8 "Hamarepo Rounded","Hiragino Maru Gothic ProN",sans-serif;box-shadow:0 5px 0 #f1e3ee;text-align:left}
.hf-say::before{content:"";position:absolute;left:calc(50% - 8px);top:-9px;width:16px;height:16px;background:#fff;border-left:1px solid var(--hf-line);border-top:1px solid var(--hf-line);transform:rotate(45deg)}
.hf-folio{position:absolute;bottom:16px;margin:0;font:italic 12px Georgia,serif;color:#b8a0b4}
.hf-side--l .hf-folio{left:26px}.hf-side--r .hf-folio{right:26px}



.hf-page-title{display:flex;align-items:baseline;gap:12px;padding:0;margin:0 0 6px;color:var(--hf-ink);font:700 21px/1.5 "Hamarepo Rounded","Hiragino Maru Gothic ProN",sans-serif;outline:0}
.hf-page-no{align-self:center;padding:3px 10px;border-radius:20px;background:#f3e6f1;color:#a0679a;font:700 11px/1.4 "Hamarepo Rounded","Hiragino Maru Gothic ProN",sans-serif;letter-spacing:.06em}
.hf-page-lead{font-size:12px;line-height:1.9;color:var(--hf-soft);margin:0 0 20px}

.hf-birth{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:12px}
.hf-birth label{display:grid;gap:6px;font-size:11px;color:var(--hf-soft)}
.hf-birth select{width:100%;height:46px;padding:0 12px;border:1px solid #d9c3d4;border-radius:12px;background:#fff;color:var(--hf-ink);font-size:15px}
.hf-birth select:focus-visible,.hf-choice input:focus-visible+span{outline:3px solid #b98bd0;outline-offset:2px}
.hf-sign{min-height:30px;margin:16px 0 0;color:var(--hf-ink);font:700 14px/1.6 "Hamarepo Rounded","Hiragino Maru Gothic ProN",sans-serif}
.hf-sign b{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;border-radius:50%;background:var(--hf-lilac);color:var(--hf-accent);font-size:16px;vertical-align:middle}
.hf-sign.is-new b{animation:hf-pop .42s steps(1,end) both}
@keyframes hf-pop{0%{transform:scale(.6)}25%{transform:scale(1.25) rotate(-8deg)}50%{transform:scale(.92) rotate(5deg)}75%{transform:scale(1.06)}100%{transform:none}}

.hf-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hf-choice{position:relative;cursor:pointer}
.hf-choice input,.hf-card input{position:absolute;opacity:0;width:1px;height:1px}
.hf-choice span{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 16px;border:1px solid #e1cddc;border-radius:16px 22px 18px 12px;background:#fff;color:var(--hf-ink);font:700 14px/1.5 "Hamarepo Rounded","Hiragino Maru Gothic ProN",sans-serif;transition:background-color .2s,border-color .2s}
.hf-choice b{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--hf-lilac);color:var(--hf-accent);font-size:15px}
.hf-choice input:checked+span{border-color:var(--hf-accent);background:#fbeff6;box-shadow:0 4px 0 #ecd3e3}
.hf-choice input:checked+span b{background:var(--hf-accent);color:#fff;animation:hf-pop .42s steps(1,end) both}


.hf-error{margin:12px 0 0;color:#b0456f;font-size:12px;font-weight:700}
.hf-live{text-align:center;margin-top:18px}
.hf-submit{display:flex;margin:24px auto 0}
.hf-skip{display:block;margin:14px auto 0;padding:6px 4px;border:0;background:none;color:#8d6c94;font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hf-page-title small{font-size:12px;color:var(--hf-soft);margin-left:4px}
.hf-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;max-width:1000px;margin:30px auto 0}
.hf-prev{grid-column:1;justify-self:start}.hf-progress{grid-column:2}.hf-next{grid-column:3;justify-self:end}
.hf-controls[hidden],.hf-prev[hidden],.hf-next[hidden]{display:none}
.hf-controls .hu-button{min-width:140px}
.hf-progress{display:flex;gap:8px;margin:0}
.hf-progress span{width:9px;height:9px;border-radius:50%;background:#ead9e5}
.hf-progress span.is-done{background:var(--hf-rose)}
.hf-progress span.is-current{background:var(--hf-accent);transform:scale(1.25)}

/* Page turn: a leaf with two cloned faces rotates around the spine in held steps (koma motion). */
.hf-flipleaf{position:absolute;top:14px;bottom:14px;z-index:5;transform-style:preserve-3d;pointer-events:none}
.hf-flipleaf--next{left:50%;right:14px;transform-origin:left center}
.hf-flipleaf--prev{left:14px;right:50%;transform-origin:right center}
.hf-flipleaf--single-next,.hf-flipleaf--single-prev{left:14px;right:14px;transform-origin:left center}
.hf-flipleaf--single-prev{transform:rotateY(-180deg)}
.hf-flipleaf.is-turning{animation:.82s steps(8,jump-none) forwards}
.hf-flipleaf--next.is-turning,.hf-flipleaf--single-next.is-turning{animation-name:hf-turn-next}
.hf-flipleaf--prev.is-turning{animation-name:hf-turn-prev}
.hf-flipleaf--single-prev.is-turning{animation-name:hf-turn-back}
@keyframes hf-turn-next{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
@keyframes hf-turn-prev{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
@keyframes hf-turn-back{from{transform:rotateY(-180deg)}to{transform:rotateY(0)}}
.hf-flipleaf-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--hf-paper);box-shadow:0 10px 30px #5b3a6a26}
.hf-flipleaf-face--back{transform:rotateY(180deg)}
.hf-flipleaf-face>*{height:100%;visibility:visible}
.hf-flipleaf-face>.hf-page{grid-area:auto}
.hf-flipleaf-face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#5b3a6a2e,transparent 22%)}
.hf-flipleaf--prev .hf-flipleaf-face--front::after,.hf-flipleaf--next .hf-flipleaf-face--back::after{background:linear-gradient(270deg,#5b3a6a2e,transparent 22%)}
.hf-flipleaf-face.is-blank{background:linear-gradient(90deg,#ead9cc 0,#f8efe6 18px,var(--hf-paper) 46px)}

/* Result: an open two-page spread. */
.hf-result{position:relative;padding:20px 0 30px}
.hf-result-head{text-align:center;margin-bottom:34px}
.hf-result-head>p:last-child{font-size:12px;color:var(--hf-soft);margin-top:10px}
/* A little reading: a storybook page with bookmark tabs (sign / card / spot / moon). */
.hf-mini{position:relative;max-width:820px;margin:0 auto;padding:22px 34px 30px;border-radius:10px 26px 14px 22px;background:linear-gradient(90deg,#ead9cc 0,#f8efe6 14px,var(--hf-paper) 36px);box-shadow:0 0 0 8px #f2b6c8,0 0 0 9px #c98ca9,0 20px 44px #5b3a6a26}
.hf-mini-title{margin:0 0 14px;text-align:center;font:italic 14px Georgia,serif;color:#a083a4}
.hm-ref #maincontent .hf-mini-title{font-family:"Hamarepo Rounded","Hiragino Maru Gothic ProN",sans-serif;font-style:normal;font-weight:700;font-size:13px;letter-spacing:.1em}
.hf-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 22px}
.hf-tabs[hidden]{display:none}
.hf-tabs button{padding:8px 16px;border:1px solid #e1cddc;border-radius:16px 16px 6px 6px;background:#fff;color:#7d5f86;font:700 13px "Hamarepo Rounded","Hiragino Maru Gothic ProN",sans-serif;cursor:pointer}
.hf-tabs button[aria-selected=true]{border-color:var(--hf-accent);background:var(--hf-accent);color:#fff;box-shadow:0 4px 0 #ecd3e3}
.hf-tabs button:focus-visible{outline:3px solid #b98bd0;outline-offset:2px}
.hf-panel{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:center}
.hf-panel[hidden]{display:none}
.hf-mini:not(.is-tabbed) .hf-panel+.hf-panel{margin-top:24px;padding-top:24px;border-top:1px dashed #e8cfdc}
.hf-panel-art{display:grid;place-items:center}
.hf-panel-title{margin:0 0 8px;color:var(--hf-ink);font:700 21px/1.5 "Hamarepo Rounded","Hiragino Maru Gothic ProN",sans-serif}
.hf-panel-lead{margin:0 0 8px;color:var(--hf-ink);font-size:14px;line-height:1.9;font-weight:700}
.hf-panel-text>p:not(.hf-panel-lead){margin:0;font-size:13px;line-height:1.95;color:#6e6272}
.hf-sign-badge{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 24% 22%,#fff 0 7%,transparent 8%),linear-gradient(160deg,#f6dcea,#e7d6f4);color:var(--hf-accent);font-size:50px;box-shadow:0 0 0 6px #fff,0 0 0 7px #e3bdd2}
.hf-answer{margin:12px 0 0!important;padding:14px 16px;border-radius:14px 18px 16px 6px;background:#fbf0f6;color:#5f5363!important;font-size:14px!important;line-height:1.9!important}
.hf-answer span{display:block;margin-bottom:2px;color:#a0679a;font-size:11px;font-weight:700;letter-spacing:.05em}
/* Today's ranking */
.hf-rank-title{margin:0 0 14px;text-align:center;color:var(--hf-ink);font:700 19px/1.5 "Hamarepo Rounded","Hiragino Maru Gothic ProN",sans-serif}
.hf-rank-title time{color:var(--hf-accent)}
.hf-rank-place{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 10px;color:var(--hf-ink);font-weight:700}
.hf-rank-place b{font-size:17px;margin:0 2px}
.hf-rank-place strong{font:italic 46px/1 Georgia,serif;color:var(--hf-accent)}
.hf-rank-place strong small{font:700 15px "Hamarepo Rounded","Hiragino Maru Gothic ProN",sans-serif;margin-left:2px}
.hf-sign-badge--small{width:44px;height:44px;font-size:22px;box-shadow:0 0 0 3px #fff,0 0 0 4px #e3bdd2}
.hf-rank-line{margin:0 0 8px;text-align:center;color:var(--hf-ink);font-size:14px;font-weight:700;line-height:1.8}
.hf-rank-place{margin-bottom:6px}
.hf-rank-line{max-width:560px;margin:0 auto}
.hf-rank-star{display:block;margin-bottom:2px;color:#a0679a;font-size:12px}
.hf-rank-star span{color:#d4a640;letter-spacing:.06em;font-size:14px}
.hf-rank-hint a{margin-left:6px;color:var(--hf-accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.hf-rank-top{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:14px 0 0;font-size:12px;color:#7c707f}
.hf-rank-top b{margin-right:4px;font:italic 14px Georgia,serif;color:#c99a2e}
.hf-rank-hint{max-width:560px;margin:0 auto;padding:12px 16px;border-radius:14px;background:#fbf0f6;text-align:center;font-size:13px;color:#6e6272}
.hf-rank-note{margin:4px 0 0;text-align:center;font-size:11px;color:#9a8e9c}
.hf-rank[hidden]{display:none}
.hf-mini:not(.is-tabbed) .hf-rank+.hf-panel{margin-top:24px;padding-top:24px;border-top:1px dashed #e8cfdc}

.hf-pick{display:flex;flex-direction:column;gap:10px;min-width:0}
/* Align cards across columns even when reason labels wrap differently. */
@supports(grid-template-rows:subgrid){.hf-pick{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:10px}.hf-pick-reason{align-self:end;justify-self:start}}
.hf-pick-reason{margin:0;align-self:flex-start;padding:5px 12px;border-radius:14px 14px 14px 4px;background:var(--hf-accent);color:#fff;font-size:11px;font-weight:700;line-height:1.6}
.hf-empty{text-align:center;font-size:13px;color:var(--hf-soft)}
.hf-again{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:40px 0 70px}
.hf-again .hf-note{flex-basis:100%}

@media(max-width:1100px){.hf-birth{grid-template-columns:1fr 1fr}.hf-birth-year{grid-column:1/-1}.hf-side{padding:28px 26px 44px}}
@media(max-width:767px){
 .hf-section{padding:48px 0 44px}
 .hf-heading{margin-bottom:22px}
 .hf-heading>p:last-child{font-size:12px}
 .hf-pages{padding:8px}
 .hf-page{grid-template-columns:1fr}
 .hf-side--l{flex-direction:row;justify-content:flex-start;gap:12px;padding:20px 16px 0;border-radius:8px 8px 0 0;background:var(--hf-paper)}
 .hf-side--l .hf-folio{display:none}
 .hf-art{width:86px;flex:none}
 .hf-say{font-size:12px;padding:10px 13px}
 .hf-say::before{left:-9px;top:calc(50% - 8px);border-top:0;border-bottom:1px solid var(--hf-line)}
 .hf-side--r{padding:18px 16px 42px;border-radius:0 0 12px 12px;background:var(--hf-paper)}
 .hf-flipleaf{top:8px;bottom:8px}
 .hf-flipleaf--single-next,.hf-flipleaf--single-prev{left:8px;right:8px}
 .hf-page-title{font-size:18px}
 .hf-mini{padding:18px 16px 24px}
 .hf-panel{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px}
  .hf-tabs button{padding:7px 11px;font-size:12px}
 .hf-panel-title{font-size:18px}
 .hf-rank-title{font-size:17px}
 .hf-choices{grid-template-columns:1fr}
 .hf-choice span{min-height:50px;font-size:13px}
 .hf-controls .hu-button{min-width:0;padding-inline:16px}
 /* The fixed TOP/guide bubbles would cover the page buttons. */
 .hm-ref.hf-controls-in-view .hm-floating-nav.is-visible{opacity:0;visibility:hidden;transition-delay:0s}
}
@media(max-width:359px){.hf-birth{grid-template-columns:1fr}.hf-controls{grid-template-columns:1fr 1fr}.hf-progress{grid-column:1/-1;grid-row:1;justify-self:center}.hf-prev{grid-row:2}.hf-next{grid-row:2;grid-column:2}}
/* Search results: the storybook folded into a banner that opens in place. */
.hf-fold{max-width:1000px;margin:0 auto}
.hf-fold-summary{display:flex;align-items:center;gap:18px;max-width:680px;margin:0 auto;padding:14px 22px 14px 14px;border-radius:18px 26px 22px 14px;background:linear-gradient(100deg,#fff7fb,#f3e9fa);box-shadow:0 0 0 1px #e8cfe0,0 6px 0 #f3e2ee;cursor:pointer;list-style:none}
.hf-fold-summary::-webkit-details-marker{display:none}
.hf-fold-summary:focus-visible{outline:3px solid #b98bd0;outline-offset:3px}
.hf-fold-art{flex:none;width:64px;aspect-ratio:2/3;overflow:hidden}
.hf-fold-art img{display:block;width:100%;height:auto}
.hf-fold-text{display:grid;gap:4px;flex:1;min-width:0}
.hf-fold-text b{color:var(--hf-ink);font:700 17px/1.5 "Hamarepo Rounded","Hiragino Maru Gothic ProN",sans-serif}
.hf-fold-text small{color:var(--hf-soft);font-size:12px;line-height:1.8;word-break:auto-phrase}
.hf-fold-toggle{flex:none;padding:8px 16px;border-radius:20px;background:var(--hf-accent);color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.hf-fold-toggle::before{content:"ひらく"}
.hf-fold[open] .hf-fold-toggle{background:#fff;color:var(--hf-accent);box-shadow:inset 0 0 0 1px var(--hf-accent)}
.hf-fold[open] .hf-fold-toggle::before{content:"とじる"}
.hf-fold-body{padding-top:34px}
@media(hover:hover){.hf-fold-summary:hover{box-shadow:0 0 0 1px #d6aecb,0 6px 0 #f0d8e7}}
@media(max-width:767px){.hf-fold-summary{gap:12px;padding:12px 14px 12px 10px}.hf-fold-art{width:48px}.hf-fold-text b{font-size:15px}.hf-fold-toggle{padding:7px 12px}}
@media(max-width:400px){.hf-fold-text small{display:none}}

/* Responsive polish: phrase-aware Japanese line breaks, room under the ribbon, readable sizes. */
.hf-heading .hm-section-title,.hf-result-head h1,.hf-page-title,.hf-rank-title,.hf-panel-title{text-wrap:balance;word-break:auto-phrase}
.hf-say{word-break:auto-phrase}
.hf-heading>p,.hf-result-head>p,.hf-page-lead,.hf-rank-line,.hf-panel-lead,.hf-answer,.hf-note,.hf-rank-hint,.hu-results .hu-section-heading p{text-wrap:pretty;word-break:auto-phrase}
.hf-controls{margin-top:52px}
.hf-mini{max-width:680px}
.hf-rank-title{font-size:20px}
.hf-rank-line{font-size:15px}
.hf-rank-top{font-size:13px}
.hf-rank-top span{white-space:nowrap}
.hf-tabs button{white-space:nowrap}
@media(max-width:1100px){
 .hf-choices{grid-template-columns:1fr}
 .hm-ref.hf-controls-in-view .hm-floating-nav.is-visible{opacity:0;visibility:hidden;transition-delay:0s}
}
@media(max-width:767px){
 .hf-heading>p br,.hf-result-head>p br{display:none}
 .hf-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
 .hf-tabs button{padding:8px 6px}
 .hf-rank-title{font-size:16px}
 .hf-rank-place{gap:4px 8px}
 .hf-rank-place strong{font-size:38px}
 .hf-rank-line{font-size:14px}
 .hf-rank-top{gap:4px 12px;font-size:12px}
}
@media(max-width:400px){
 .hm-ref .hu-search-filters{grid-template-columns:1fr}
 .hm-ref .hu-search-filters>label:last-child{grid-column:auto}
 .hf-sign-badge--small{width:34px;height:34px;font-size:17px}
 .hf-rank-top{gap:2px 8px;font-size:11px}
 .hf-rank-top b{font-size:12px;margin-right:2px}
}
@media(prefers-reduced-motion:reduce){
}