/* 計算室と占い入門の装飾。余白・入力欄・計算結果の寸法を変えない。 */
.learning-fx{--lfx-gold:#bd8733;--lfx-blue:#568fb4;--lfx-pink:#bf82b2}
html:is([data-theme="dark"],[data-theme="night"]) .learning-fx{--lfx-gold:#f3d489;--lfx-blue:#98dce9;--lfx-pink:#e7acd6}
.lfx-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none!important;z-index:45;contain:strict}
.lfx-layer *{position:absolute;pointer-events:none!important}
.lfx-art{position:relative;isolation:isolate;overflow:hidden}
.lfx-art>.lfx-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 22%,#000 64%);mask-image:linear-gradient(90deg,transparent 22%,#000 64%)}
.lfx-art>.tool-hero-copy,.lfx-art>.cover-copy{z-index:1}
.lfx-atmosphere::before{content:"";position:absolute;inset:-30% -15% -25% 35%;
  background:conic-gradient(from 10deg at 65% 40%,transparent 0deg,#d5efff33 34deg,transparent 64deg,#f4d88e55 115deg,transparent 150deg,#bdcdf555 210deg,transparent 255deg,#f1cee544 300deg,transparent 340deg);
  mix-blend-mode:screen;animation:lfx-aurora 22s ease-in-out infinite alternate;transform-origin:65% 40%}
.lfx-orbit{position:absolute;right:7%;top:50%;width:clamp(130px,26vw,270px);aspect-ratio:1;border:1px solid #f9e4b470;border-radius:50%;
  transform:translateY(-50%) rotate(-25deg);box-shadow:0 0 20px #f0d8a51c,inset 0 0 30px #d7f1ff14;animation:lfx-orbit 38s linear infinite}
.lfx-orbit::before{content:"";position:absolute;inset:9%;border:1px dashed #fff5d956;border-radius:50%;transform:rotate(32deg) scaleY(.74)}
.lfx-orbit::after{content:"";position:absolute;left:16%;top:10%;width:6px;height:6px;border-radius:50%;background:#fff9d7;box-shadow:0 0 12px #f9d990,0 0 24px #f9d99088}
.lfx-twinkle{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);color:#fff6ce;
  background:currentColor;clip-path:polygon(50% 0,60% 39%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 39%);
  animation:lfx-twinkle var(--duration) ease-in-out var(--delay) infinite;filter:drop-shadow(0 0 4px #fff)}
.lfx-art:not(.lfx-visible) .lfx-atmosphere *,.lfx-art:not(.lfx-visible) .lfx-atmosphere::before,
.learning-fx.lfx-suspended .lfx-atmosphere *,.learning-fx.lfx-suspended .lfx-atmosphere::before{animation-play-state:paused}
@keyframes lfx-aurora{from{transform:rotate(-12deg) scale(1);opacity:.52}to{transform:rotate(23deg) scale(1.12);opacity:.9}}
@keyframes lfx-orbit{to{transform:translateY(-50%) rotate(335deg)}}
@keyframes lfx-twinkle{0%,100%{opacity:.13;transform:scale(.55) rotate(0)}48%{opacity:.9;transform:scale(1.1) rotate(80deg)}}

.lfx-card{--lfx-x:50%;--lfx-y:30%;transition:box-shadow .25s ease,border-color .25s ease}
@media(hover:hover) and (pointer:fine){
  .learning-fx .lfx-card:hover{border-color:#bf9c5570;box-shadow:0 7px 24px #385b7020,0 0 0 1px #d3b47535}
  .learning-fx .lfx-card .banner-heading::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at var(--lfx-x) var(--lfx-y),#fff6dc60,transparent 55%);opacity:0;transition:opacity .25s}
  .learning-fx .lfx-card:hover .banner-heading::after{opacity:1}
}
.learning-fx :is(button,summary,.lfx-card a):active{filter:brightness(1.08)}
.lfx-ring{width:26px;height:26px;border:1.5px solid var(--lfx-gold);border-radius:50%;
  box-shadow:0 0 10px #f3d58c55,inset 0 0 10px #c9e9f633;
  animation:lfx-ring .65s cubic-bezier(.15,.7,.25,1) both}
.lfx-star{width:var(--size);height:var(--size);background:var(--spark-color);opacity:0;
  clip-path:polygon(50% 0,61% 37%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 37%);
  animation:lfx-burst var(--life) cubic-bezier(.14,.64,.31,1) both}
.lfx-bead{width:4px;height:4px;border-radius:50%;background:var(--spark-color);opacity:0;animation:lfx-burst var(--life) ease-out both}
@keyframes lfx-ring{0%{opacity:.85;transform:translate(-50%,-50%) scale(.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.2)}}
@keyframes lfx-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0)}12%{opacity:.9}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.35) rotate(var(--turn))}}
.lfx-result-light{height:3px;width:var(--width);border-radius:50%;background:linear-gradient(90deg,transparent,var(--lfx-blue),#fff2cb,var(--lfx-gold),transparent);
  box-shadow:0 0 15px #ddbe7c88;transform-origin:center;animation:lfx-result-light .95s ease-out both}
@keyframes lfx-result-light{0%{opacity:0;transform:scaleX(.08)}25%{opacity:1;transform:scaleX(.65)}100%{opacity:0;transform:scaleX(1)}}
.lfx-medallion{width:72px;height:72px;border:1px solid var(--lfx-gold);border-radius:50%;opacity:0;
  box-shadow:0 0 18px #efcc8d44,inset 0 0 15px #b0d9ee30;animation:lfx-medallion 1.1s ease-out both}
.lfx-medallion::before{content:"";position:absolute;inset:8px;border:1px dashed var(--lfx-blue);border-radius:50%}
.lfx-medallion::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:var(--lfx-gold);font-size:30px;line-height:1}
@keyframes lfx-medallion{0%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-30deg)}22%{opacity:.7;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-58%) scale(1.3) rotate(22deg)}}
.lfx-soft-feedback{width:46px;height:46px;border:1px solid var(--lfx-gold);border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,#f5dcac20,transparent 70%);box-shadow:0 0 14px #e8c88b55;animation:lfx-soft-fade .65s ease-out both}
@keyframes lfx-soft-fade{0%{opacity:.65}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .lfx-atmosphere::before,.lfx-atmosphere *{animation:none!important}
  .lfx-twinkle{opacity:.45}
  .lfx-result-light,.lfx-medallion{animation:lfx-soft-fade .8s ease-out both}
  .lfx-medallion{transform:translate(-50%,-50%)}
  .lfx-card,.learning-fx .lfx-card .banner-heading::after{transition:none!important}
}
@media print{.lfx-layer,.lfx-atmosphere{display:none!important}.learning-fx .lfx-card{box-shadow:none!important}}