@charset "UTF-8";
:root {
  color-scheme:dark;
  --night:#0b0d20;
  --panel:#141528;
  --gold:#d8bd82;
  --gold-light:#f0dcac;
  --muted:#a09baa;
  --text:#eeebed;
  --line:rgba(212,185,126,.22);
  --serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}
body {
  margin:0;
  background:var(--night);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.7;
  min-width:300px;
  overflow-x:hidden
}
body::before {
  position:fixed;
  inset:0;
  z-index:-2;
  content:"";
  background:radial-gradient(ellipse at 28% 40%,#35274660,transparent 44%),radial-gradient(ellipse at 75% 0%,#33265330,transparent 55%),linear-gradient(115deg,#0a0e20,#100f24 60%,#0a0d1e)
}
body::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.46;
  background-image:radial-gradient(1px 1px at 8% 18%,#f4dfac 90%,transparent),radial-gradient(1px 1px at 28% 8%,#f4dfac 90%,transparent),radial-gradient(1px 1px at 39% 38%,#f4dfac 90%,transparent),radial-gradient(1px 1px at 65% 15%,#f4dfac 90%,transparent),radial-gradient(1px 1px at 80% 69%,#f4dfac 90%,transparent),radial-gradient(1px 1px at 12% 76%,#f4dfac 90%,transparent);
  background-size:460px 480px
}
a {
  color:inherit;
  text-underline-offset:4px
}
button,input {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed
}
button:focus-visible,a:focus-visible,input:focus-visible+span {
  outline:2px solid var(--gold-light);
  outline-offset:5px
}
button {
  color:inherit
}
button,a,input {
  touch-action:manipulation
}
[hidden] {
  display:none!important
}
h1,h2,h3,p {
  margin:0
}
button {
  border:0
}
a {
  transition:color .2s
}
.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  background:var(--gold-light);
  color:var(--night);
  padding:10px 18px;
  z-index:100
}
.skip-link:focus {
  top:10px
}
.site-header {
  max-width:1280px;
  margin:0 auto;
  height:91px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 50px;
  border-bottom:1px solid #ffffff0c
}
.brand {
  display:flex;
  align-items:center;
  font-size:21px;
  font-weight:650;
  text-decoration:none;
  letter-spacing:-1px
}
.brand>span:first-child {
  color:#bda779
}
.brand-divider {
  display:inline-block;
  background:var(--line);
  width:1px;
  height:20px;
  margin:0 21px
}
.brand-caption {
  font-family:var(--serif);
  color:#b7ac9c;
  font-size:12px;
  font-weight:400;
  letter-spacing:.13em
}
.sound-toggle {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  background:none;
  color:#b9b1ac;
  font-size:11px;
  letter-spacing:.08em;
  padding:0 8px
}
.sound-toggle>span:first-child {
  font-size:18px;
  color:var(--gold)
}
.sound-toggle[aria-pressed=true] {
  color:var(--gold-light)
}
.temple {
  pointer-events:none;
  position:absolute;
  inset:91px 0 0;
  overflow:hidden;
  z-index:-1;
  height:1000px;
  display:flex;
  justify-content:space-between;
  opacity:.28
}
.temple-column {
  width:96px;
  height:82%;
  margin:0 1%;
  background:linear-gradient(90deg,transparent,#b2abc20a 10%,#b2abc214 17%,#b2abc207 23%,#b2abc213 30%,#b2abc208 40%,#b2abc20d 53%,#b2abc204 68%,transparent);
  border-top:12px double #bab1c21a;
  border-bottom:22px double #bab1c21a;
  position:relative;
  mask-image:linear-gradient(#000,transparent)
}
.temple-column::before {
  content:"";
  position:absolute;
  top:10px;
  left:-12px;
  right:-12px;
  height:15px;
  border:1px solid #bab1c222
}
.oracle-layout {
  max-width:1150px;
  display:grid;
  grid-template-columns:.93fr 1.07fr;
  gap:62px;
  padding:65px 42px 48px;
  margin:0 auto;
  align-items:start
}
.introduction {
  padding-top:13px
}
.eyebrow {
  color:var(--gold);
  font-family:Georgia,serif;
  font-size:10px;
  letter-spacing:.18em;
  line-height:1.6
}
.introduction>.eyebrow {
  display:flex;
  gap:10px;
  align-items:center;
  white-space:nowrap
}
.introduction>.eyebrow>span {
  width:21px;
  height:1px;
  background:var(--gold)
}
h1 {
  font-family:var(--serif);
  font-weight:500;
  font-size:59px;
  letter-spacing:.1em;
  line-height:1.48;
  margin-top:24px
}
h1>span {
  display:block;
  color:var(--gold-light);
  font-size:61px;
  letter-spacing:.22em
}
.english-title {
  font-family:Georgia,serif;
  font-size:11px;
  color:#a59787;
  margin-top:14px;
  letter-spacing:.07em
}
.intro-copy {
  font-size:12px;
  color:#a49cab;
  line-height:2.2;
  margin-top:28px;
  letter-spacing:.05em
}
.hero-seal {
  position:relative;
  width:290px;
  height:290px;
  margin:18px auto 6px 26px
}
.seal-art {
  position:relative;
  width:100%;
  height:100%;
  opacity:.9;
  filter:drop-shadow(0 0 17px #d4aa6440);
  animation:seal-breathe 8s ease-in-out infinite
}
.seal-halo {
  position:absolute;
  inset:40px;
  border-radius:50%;
  background:radial-gradient(#a58a6630,transparent 70%);
  box-shadow:0 0 90px #8063b41a
}
.seal-star {
  position:absolute;
  color:var(--gold);
  font-size:14px
}
.star-one {
  top:30px;
  left:-22px
}
.star-two {
  right:-22px;
  top:104px;
  font-size:20px
}
.star-three {
  left:1px;
  bottom:25px;
  font-size:10px
}
.temple-caption {
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  color:#9f948d;
  font-family:var(--serif);
  font-size:10px;
  letter-spacing:.03em
}
.temple-caption>span {
  height:1px;
  background:var(--line);
  flex:1;
  max-width:24px
}
.consultation-column {
  min-width:0
}
.consultation-panel,.result-panel {
  background:linear-gradient(140deg,#1b192dcc,#131627ed);
  border:1px solid var(--line);
  border-top-color:#cbb17c85;
  padding:28px 30px 20px;
  position:relative;
  box-shadow:0 18px 80px #0002
}
.consultation-panel::before,.result-panel::before {
  content:"";
  position:absolute;
  top:-3px;
  left:calc(50% - 3px);
  height:5px;
  width:5px;
  background:var(--gold);
  transform:rotate(45deg)
}
.panel-heading {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.small-star {
  color:var(--gold);
  font-size:17px;
  line-height:1
}
.consultation-panel h2 {
  font-family:var(--serif);
  font-size:23px;
  font-weight:500;
  margin-top:13px;
  letter-spacing:.06em
}
.panel-description {
  font-size:11px;
  color:#a59daa;
  margin-top:5px
}
.step {
  border:0;
  margin:24px 0 0;
  padding:0;
  min-width:0
}
.step legend {
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:500;
  font-size:12px;
  margin-bottom:12px;
  padding:0;
  width:100%;
  letter-spacing:.025em
}
.step-number {
  font-family:Georgia,serif;
  color:var(--gold);
  font-size:13px;
  letter-spacing:.02em;
  margin-right:2px
}
.field-badge {
  font-size:9px;
  color:#c9af7c;
  border:1px solid #c9af7c30;
  border-radius:2px;
  padding:0 5px;
  line-height:1.7;
  margin-left:auto
}
.field-badge.optional {
  border-color:#ada4b324;
  color:#a69caa
}
.category-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px
}
.choice {
  position:relative;
  cursor:pointer
}
.choice input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}
.category-choice {
  display:flex;
  min-height:77px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid #8c82972b;
  background:#1012246b;
  border-radius:3px;
  font-size:11px;
  transition:background .2s,border-color .2s,color .2s;
  position:relative
}
.choice-icon {
  width:22px;
  height:22px;
  fill:none;
  stroke:#b5a68d;
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round
}
.choice:hover .category-choice,.choice:hover .purpose-choice {
  border-color:#b69a6270;
  background:#b69a620c
}
.choice input:checked+.category-choice,.choice input:checked+.purpose-choice {
  border-color:#c9a966;
  background:#b99b6319;
  color:#f4ddaf;
  box-shadow:inset 0 0 0 1px #c9a9661c
}
.choice input:checked+.category-choice::after {
  content:"✓";
  position:absolute;
  right:6px;
  top:2px;
  color:var(--gold);
  font-size:9px
}
.choice input:checked+.category-choice svg {
  stroke:#e1bf7d
}
.purpose-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px
}
.purpose-choice {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:47px;
  padding:10px 9px;
  border:1px solid #8c82972b;
  border-radius:3px;
  background:#1012246b;
  font-size:10px;
  transition:background .2s,border-color .2s
}
.radio-indicator {
  width:11px;
  height:11px;
  border:1px solid #807580;
  border-radius:50%;
  flex-shrink:0;
  display:grid;
  place-items:center
}
.choice input:checked+.purpose-choice .radio-indicator {
  border-color:var(--gold)
}
.choice input:checked+.purpose-choice .radio-indicator::after {
  content:"";
  height:5px;
  width:5px;
  border-radius:50%;
  background:var(--gold)
}
.detail-step {
  margin-top:23px
}
.detail-step legend {
  margin-bottom:10px
}
.detail-hint {
  font-size:10px;
  line-height:1.8;
  color:#8e8498;
  min-height:18px
}
.detail-options {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.detail-button {
  padding:6px 10px;
  font-size:10px;
  min-height:34px;
  color:#b2a8b8;
  border:1px solid #8c829737;
  background:#10122455;
  border-radius:20px;
  line-height:1.5
}
.detail-button:hover {
  border-color:#cbb07888
}
.detail-button[aria-pressed=true] {
  background:#cbb0781f;
  color:var(--gold-light);
  border-color:var(--gold)
}
.summon-button {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  width:100%;
  min-height:54px;
  margin-top:25px;
  padding:13px 35px;
  background:linear-gradient(110deg,#d1af70,#f0d6a2 55%,#d4b276);
  color:#292132;
  font-family:var(--serif);
  font-size:16px;
  font-weight:600;
  letter-spacing:.09em;
  border:1px solid #f5dfae;
  box-shadow:0 3px 20px #cbaa5f14;
  transition:filter .2s,box-shadow .2s
}
.summon-button:hover:enabled {
  filter:brightness(1.09);
  box-shadow:0 0 25px #cbaa5f36
}
.summon-button:disabled {
  background:linear-gradient(110deg,#8f7a58,#ab936a);
  color:#25202b;
  border-color:#bc9e6b70;
  opacity:.62;
  box-shadow:none
}
.summon-button>span:first-child {
  font-size:14px
}
.button-arrow {
  position:absolute;
  right:17px;
  font-family:var(--sans);
  font-size:18px;
  font-weight:400
}
.form-hint {
  text-align:center;
  color:#a397a8;
  min-height:18px;
  font-size:10px;
  margin-top:8px
}
.privacy-note {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-top:1px solid #ffffff0b;
  margin-top:18px;
  padding-top:14px;
  color:#8e8498;
  font-size:9px
}
.privacy-note>span {
  color:#b9a475
}
.temple-guide {
  max-width:1066px;
  margin:0 auto;
  padding:29px 25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  gap:20px
}
.temple-guide>div {
  display:flex;
  gap:16px;
  align-items:center
}
.guide-number {
  font-family:Georgia,serif;
  color:#a38b65;
  font-size:24px;
  font-style:italic;
  font-weight:400;
  min-width:19px
}
.temple-guide p {
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.06em
}
.temple-guide small {
  display:block;
  font-family:var(--sans);
  font-size:9px;
  color:#8f8599;
  margin-top:5px;
  letter-spacing:0
}
.guide-line {
  width:50px;
  flex-shrink:1;
  height:1px;
  background:var(--line)
}
.entertainment-note {
  text-align:center;
  margin:24px 20px 33px;
  font-size:10px;
  color:#928798
}
.site-footer {
  max-width:1180px;
  margin:auto;
  padding:20px 0 27px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #ffffff0b;
  color:#887e91;
  font-size:9px;
  gap:15px
}
.site-footer a {
  text-decoration:none
}
.site-footer a:first-child {
  font-size:13px;
  color:#b3a38b;
  font-weight:600
}
.site-footer>span {
  font-family:Georgia,serif;
  font-size:8px;
  letter-spacing:.08em
}
.status-message {
  color:var(--gold-light);
  font-size:12px;
  text-align:center;
  line-height:1.8;
  padding:0 10px
}
.status-message:not(:empty) {
  margin-top:16px
}
.noscript-message {
  margin-top:15px;
  color:var(--gold-light)
}
.result-panel {
  padding:28px 28px 18px
}
.result-selection {
  font-size:10px;
  color:#aba1af;
  margin-top:11px
}
.oracle-card {
  text-align:center;
  padding:25px 3px 0
}
.result-type {
  display:inline-block;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--gold);
  border:1px solid var(--line);
  padding:4px 14px
}
.result-divider {
  color:var(--gold);
  font-family:Georgia,serif;
  letter-spacing:.2em;
  font-size:18px;
  margin:20px 0 16px
}
.oracle-card h2 {
  font-family:var(--serif);
  font-size:25px;
  letter-spacing:.06em;
  font-weight:500;
  line-height:1.65;
  overflow-wrap:anywhere;
  text-wrap:pretty
}
.oracle-card h2:focus {
  outline:none
}
.oracle-body {
  font-family:var(--serif);
  font-size:16px;
  line-height:2.1;
  margin-top:23px;
  white-space:pre-line;
  overflow-wrap:anywhere;
  color:#e3dbe4;
  text-align:left
}
.mission {
  text-align:left;
  border:1px solid var(--line);
  background:#c7ad7310;
  margin-top:24px;
  padding:15px 18px
}
.mission h3 {
  font-size:10px;
  color:var(--gold);
  font-weight:500;
  letter-spacing:.12em;
  margin-bottom:6px
}
.mission h3 span {
  margin-right:6px
}
.mission p {
  font-family:var(--serif);
  font-size:14px;
  line-height:1.9;
  color:#eee4cf;
  overflow-wrap:anywhere
}
.fortune {
  margin-top:20px;
  font-family:var(--serif);
  font-size:13px;
  color:var(--gold-light)
}
.card-signature {
  font-family:var(--serif);
  font-size:9px;
  letter-spacing:.08em;
  color:#ada08d;
  margin-top:20px
}
.card-signature span {
  display:block;
  font-family:Georgia,serif;
  font-size:7px;
  letter-spacing:.15em;
  margin-top:2px
}
.share-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px
}
.secondary-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:45px;
  border:1px solid #8c829745;
  background:#10122455;
  font-size:11px;
  color:#d5cbd4;
  text-decoration:none;
  border-radius:2px
}
.secondary-button:hover {
  border-color:var(--gold);
  color:var(--gold-light)
}
.secondary-button:disabled {
  opacity:.5
}
.secondary-button>span {
  font-size:15px
}
.share-note {
  font-size:9px;
  line-height:1.8;
  text-align:center;
  color:#9a8da3;
  margin-top:12px
}
.native-share-button {
  display:block;
  margin:12px auto 0;
  padding:8px;
  background:none;
  font-size:11px;
  color:var(--gold)
}
.change-button {
  display:block;
  padding:12px;
  margin:7px auto 0;
  background:none;
  color:#b1a4b8;
  font-size:11px
}
.change-button:hover {
  color:var(--gold-light)
}
.event-art {
  position:relative;
  height:58px;
  margin:18px auto 0;
  width:150px;
  color:var(--gold)
}
.event-art[data-event=absent]::before {
  content:"◇";
  font-size:55px;
  line-height:58px;
  display:block;
  opacity:.5;
  animation:absent-glow 3s ease-in-out infinite
}
.event-art[data-event=absent]::after {
  content:"ただいま外出中";
  position:absolute;
  inset:19px -10px auto;
  background:#1a192c;
  font-size:10px;
  letter-spacing:.1em
}
.event-art[data-event=sleeping]::before {
  content:"☾";
  display:block;
  font-size:55px;
  line-height:58px;
  color:#e5cd95;
  animation:sleep-breathe 3s ease-in-out infinite
}
.event-art[data-event=sleeping]::after {
  content:"z Z z";
  position:absolute;
  right:0;
  top:0;
  font-family:Georgia,serif;
  font-size:19px;
  letter-spacing:.1em;
  animation:sleep-rise 3s ease-in-out infinite
}
.event-art[data-event=council] {
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center
}
.event-art[data-event=council] span {
  width:28px;
  height:28px;
  border:1px solid var(--gold);
  border-radius:50%;
  position:relative;
  animation:council-bob 2s ease-in-out infinite
}
.event-art[data-event=council] span:nth-child(2) {
  animation-delay:.5s
}
.event-art[data-event=council] span:nth-child(3) {
  animation-delay:1s
}
.event-art[data-event=council] span::before {
  content:"";
  position:absolute;
  top:-10px;
  left:4px;
  right:4px;
  height:5px;
  border:1px solid var(--gold);
  border-radius:50%
}
.event-art[data-event=gaming],
.event-art[data-event=eating] {
  width:150px;
  height:72px;
  display:grid;
  place-items:center
}
.event-illustration {
  width:120px;
  height:64px;
  stroke:var(--gold);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible
}
.game-controller {
  animation:controller-tap 1.2s ease-in-out infinite
}
.game-button {
  animation:button-press .8s steps(2,end) infinite
}
.game-button:nth-of-type(2) {
  animation-delay:.4s
}
.game-spark {
  animation:absent-glow 1.6s ease-in-out infinite
}
.meal-steam {
  animation:meal-steam 2.4s ease-in-out infinite
}
.steam-two {
  animation-delay:.7s
}
.steam-three {
  animation-delay:1.4s
}
.oracle-card[data-type=sincere] .result-type {
  color:#d4c5f1;
  border-color:#b39bd044
}
.oracle-card[data-type=sincere] .mission {
  border-color:#b39bd044;
  background:#b39bd00a
}
.ritual {
  position:fixed;
  inset:0;
  z-index:1000;
  background:#090b1df7;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden
}
.ritual-circle {
  width:min(70vw,390px);
  height:min(70vw,390px);
  position:relative
}
.ritual-circle>img {
  width:100%;
  height:100%;
  animation:ritual-rotate 2.7s cubic-bezier(.15,.7,.4,1) both;
  filter:drop-shadow(0 0 24px #d4b27088)
}
.ritual-light {
  position:absolute;
  width:100vmax;
  height:100vmax;
  pointer-events:none;
  background:radial-gradient(ellipse,#d6bc9540,transparent 48%);
  transform:scale(.6);
  transition:transform .6s,opacity .6s;
  opacity:.5
}
.ritual.is-revealing .ritual-light {
  transform:scale(1.5);
  opacity:1
}
.ritual-particles {
  position:absolute;
  inset:-40%;
  border-radius:50%;
  background-image:radial-gradient(2px 2px at 18% 25%,#f7dc9e,transparent),radial-gradient(2px 2px at 80% 65%,#f7dc9e,transparent),radial-gradient(2px 2px at 72% 15%,#f7dc9e,transparent),radial-gradient(2px 2px at 23% 86%,#f7dc9e,transparent),radial-gradient(1px 1px at 52% 91%,#f7dc9e,transparent),radial-gradient(1px 1px at 89% 30%,#f7dc9e,transparent);
  animation:particles-gather 2.7s ease-in both;
  pointer-events:none
}
.ritual>.eyebrow {
  font-size:9px;
  margin-top:20px;
  z-index:1
}
.ritual h2 {
  font-family:var(--serif);
  font-size:26px;
  letter-spacing:.15em;
  font-weight:400;
  margin-top:16px;
  z-index:1
}
.ritual-message {
  margin-top:13px;
  font-size:12px;
  color:#c4b4cb;
  z-index:1
}
.skip-button {
  position:relative;
  min-height:46px;
  background:none;
  border-bottom:1px solid var(--line);
  color:var(--gold);
  font-size:11px;
  margin-top:32px;
  padding:8px 18px
}
.ritual.is-revealing .ritual-message {
  color:var(--gold-light);
  font-family:var(--serif);
  font-size:19px
}
.ritual.is-revealing .ritual-circle>img {
  filter:drop-shadow(0 0 30px #f3d293dd)
}
@keyframes seal-breathe {
  50% {
    opacity:.65;
    filter:drop-shadow(0 0 22px #d4aa6440)
  }
}
@keyframes ritual-rotate {
  from {
    transform:scale(.65) rotate(-85deg);
    opacity:0
  }
  35% {
    opacity:1
  }
  to {
    transform:scale(1) rotate(20deg);
    opacity:1
  }
}
@keyframes particles-gather {
  0% {
    transform:scale(1.5);
    opacity:0
  }
  35% {
    opacity:1
  }
  100% {
    transform:scale(.18);
    opacity:0
  }
}
@keyframes sleep-breathe {
  50% {
    transform:translateY(4px)
  }
}
@keyframes sleep-rise {
  0%,100% {
    opacity:.4;
    transform:translateY(4px)
  }
  50% {
    opacity:1;
    transform:translateY(-5px)
  }
}
@keyframes council-bob {
  50% {
    transform:translateY(-7px)
  }
}
@keyframes absent-glow {
  50% {
    opacity:.2
  }
}
@keyframes controller-tap {
  25% { transform:rotate(-3deg) }
  75% { transform:rotate(3deg) }
}
@keyframes button-press {
  50% { fill:var(--gold) }
}
@keyframes meal-steam {
  0%,100% { opacity:.25; transform:translateY(2px) }
  50% { opacity:1; transform:translateY(-4px) }
}
@media(min-width:1400px) {
  .oracle-layout {
    padding-top:80px;
    padding-bottom:65px;
    gap:84px;
    max-width:1200px
  }
  .hero-seal {
    width:310px;
    height:310px;
    margin-top:23px
  }
  .consultation-panel {
    padding:32px 33px 23px
  }
  .step {
    margin-top:26px
  }
}
@media(max-width:1000px) {
  .oracle-layout {
    gap:35px;
    padding:50px 30px 40px;
    grid-template-columns:.88fr 1.12fr
  }
  h1 {
    font-size:49px
  }
  h1>span {
    font-size:53px
  }
  .introduction>.eyebrow {
    font-size:8px
  }
  .hero-seal {
    width:250px;
    height:250px;
    margin-left:0
  }
  .consultation-panel {
    padding:25px 22px 18px
  }
  .site-header {
    padding:0 30px
  }
  .temple-guide {
    margin:0 30px;
    gap:14px
  }
  .guide-line {
    width:25px
  }
  .temple-guide>div {
    gap:10px
  }
  .temple-guide p {
    font-size:12px
  }
  .temple-guide small {
    font-size:8px
  }
  .site-footer {
    margin:0 30px
  }
  .purpose-choice {
    font-size:9px;
    gap:5px;
    padding:10px 7px
  }
  .temple-caption {
    font-size:9px
  }
  .category-choice {
    font-size:10px
  }
}
@media(max-width:720px) {
  .site-header {
    height:73px;
    padding:0 22px
  }
  .brand {
    font-size:20px
  }
  .brand-caption {
    font-size:11px
  }
  .brand-divider {
    margin:0 14px
  }
  .sound-toggle {
    font-size:10px
  }
  .oracle-layout {
    display:block;
    max-width:510px;
    padding:35px 22px 32px
  }
  .introduction {
    text-align:center;
    padding-top:0;
    position:relative
  }
  .introduction>.eyebrow {
    justify-content:center;
    font-size:8px;
    letter-spacing:.14em
  }
  h1 {
    font-size:39px;
    margin-top:17px;
    line-height:1.6;
    letter-spacing:.09em
  }
  h1>span {
    display:inline;
    font-size:39px;
    letter-spacing:.09em
  }
  .english-title {
    font-size:8px;
    margin-top:6px
  }
  .intro-copy {
    font-size:11px;
    line-height:2;
    margin-top:22px
  }
  .hero-seal {
    width:175px;
    height:175px;
    margin:10px auto 4px
  }
  .seal-star.star-one {
    top:30px;
    left:-35px
  }
  .seal-star.star-two {
    right:-35px;
    top:70px
  }
  .seal-star.star-three {
    left:2px;
    bottom:10px
  }
  .temple-caption {
    font-size:9px;
    margin-top:0
  }
  .consultation-column {
    margin-top:28px;
    scroll-margin-top:24px
  }
  .consultation-panel,.result-panel {
    padding:24px 23px 18px
  }
  .consultation-panel h2 {
    font-size:23px
  }
  .category-choice {
    min-height:77px;
    font-size:11px
  }
  .purpose-choice {
    min-height:49px;
    font-size:10px;
    gap:7px;
    padding:10px 9px
  }
  .step {
    margin-top:25px
  }
  .summon-button {
    min-height:55px
  }
  .detail-button {
    min-height:38px
  }
  .detail-hint {
    font-size:10px
  }
  .temple-guide {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:21px;
    max-width:466px;
    padding:25px 23px;
    margin:0 auto
  }
  .temple-guide>div {
    gap:19px
  }
  .temple-guide p {
    font-size:13px
  }
  .temple-guide small {
    font-size:10px
  }
  .guide-line {
    display:none
  }
  .guide-number {
    width:28px;
    text-align:center
  }
  .entertainment-note {
    font-size:9px;
    line-height:1.9;
    max-width:300px;
    margin:24px auto
  }
  .site-footer {
    margin:0 22px;
    padding:20px 0;
    flex-wrap:wrap;
    gap:12px
  }
  .site-footer>span {
    order:3;
    width:100%;
    text-align:center;
    font-size:7px
  }
  .site-footer a {
    font-size:9px
  }
  .temple {
    top:73px;
    opacity:.2
  }
  .temple-column {
    width:55px
  }
  .result-panel {
    padding:24px 23px 18px
  }
  .oracle-card h2 {
    font-size:23px
  }
  .oracle-body {
    font-size:15px
  }
  .mission {
    padding:15px
  }
  .ritual h2 {
    font-size:24px
  }
}
@media(max-width:370px) {
  .oracle-layout {
    padding-left:15px;
    padding-right:15px
  }
  h1,h1>span {
    font-size:34px
  }
  .consultation-panel,.result-panel {
    padding-left:17px;
    padding-right:17px
  }
  .category-grid,.purpose-grid {
    gap:6px
  }
  .category-choice {
    font-size:10px
  }
  .purpose-choice {
    font-size:9px;
    gap:5px;
    padding-left:7px
  }
  .temple-guide {
    margin:0 15px
  }
  .step legend {
    font-size:11px
  }
}
@media(max-width:720px) {
  .detail-button {
    min-height:44px
  }
}
/* Keep the actual choices readable even on narrow screens. Decorative labels stay quiet. */
.step legend {
  font-size:13px
}
.category-choice,.purpose-choice {
  font-size:12px
}
.purpose-choice {
  line-height:1.6
}
.detail-button,.detail-hint,.form-hint {
  font-size:11px
}
.field-badge,.privacy-note,.share-note {
  font-size:10px
}
.panel-description {
  font-size:12px
}
.secondary-button,.change-button,.sound-toggle {
  font-size:12px
}
.intro-copy {
  font-size:13px
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .ritual {
    display:none!important
  }
}