/* ==========================================================
   Living-room diagnosis — question band, answers, progress, result
   ========================================================== */
.page-shindan{--stage-bg:#f1eee8}
.sp{display:none}
[hidden]{display:none!important}

/* top band */
.shead{pointer-events:none}
.shead>*{pointer-events:auto}
.shead__lead{margin-top:10px;max-width:30em;font-size:14px;line-height:1.8;color:var(--ink-2)}
.shead__no{font-family:var(--f-lat);font-size:13px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.shead__no b{font-weight:800;color:var(--ink);font-size:15px}
.shead__text{margin-top:6px;font-family:var(--f-jp);font-weight:900;font-size:clamp(26px,3.1vw,50px);line-height:1.15;letter-spacing:-.03em}
/* dream: text surfaces out of a blur, letter by letter */
.flw{display:inline-block;white-space:nowrap}
.fl{display:inline-block;white-space:pre;opacity:0;filter:blur(10px);transform:translateY(.42em);text-shadow:0 0 22px rgba(255,255,255,.9);
  animation:flin 1.6s cubic-bezier(.22,.8,.24,1) forwards;animation-delay:calc(var(--d,0s) + var(--i) * 34ms)}
@keyframes flin{55%{filter:blur(1.2px)}to{opacity:1;filter:none;transform:none;text-shadow:0 0 0 rgba(255,255,255,0)}}
/* the white of the door, and a soft white haze at the edges of the dream */
.dwhite{position:absolute;left:0;right:0;bottom:0;top:calc(var(--hdr) + var(--tick));background:#fff;opacity:0;pointer-events:none;z-index:1}
.sstage::after{content:"";position:absolute;left:0;right:0;bottom:0;top:calc(var(--hdr) + var(--tick));pointer-events:none;z-index:1;
  background:radial-gradient(130% 95% at 50% 46%,rgba(255,252,247,0) 62%,rgba(255,250,244,.26) 100%)}

/* bottom band */
.sbar{pointer-events:none}
.sbar>*{pointer-events:auto}
.sbar__intro{display:flex;align-items:center;gap:18px}
.sbar__note{font-size:13px;color:var(--ink-2)}
.sans{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sans__btn{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:64px;padding:10px 20px 10px 12px;border-radius:999px;
  background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1.5px var(--ink);text-align:left;overflow:hidden;isolation:isolate;
  font-family:var(--f-jp);font-weight:700;font-size:clamp(15px,1.25vw,18px);transition:color .35s,transform .5s var(--ease)}
.sans__btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleX(0);transform-origin:var(--o,0) 50%;transition:transform .6s var(--ease)}
.sans__btn[data-a="1"]{--o:100%}
.sans__btn:hover,.sans__btn.is-hot{color:var(--paper)}
.sans__btn:hover::before,.sans__btn.is-hot::before{transform:none}
.sans__btn:active{transform:scale(.98)}
.sans__btn b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ember);color:#fff;font-family:var(--f-lat);font-weight:800;font-size:16px}
.sans__btn[data-a="1"] b{background:var(--green)}
.sans__btn i{font-style:normal;font-family:var(--f-lat);font-weight:700;opacity:.6}
.sans__btn.is-picked{color:var(--paper)}
.sans__btn.is-picked::before{transform:none;background:var(--ember)}
.sans.is-busy{pointer-events:none}
.sans.is-busy .sans__btn:not(.is-picked){opacity:.35;transition:opacity .4s}
.sprog{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.sprog__back{font-family:var(--f-jp);font-size:13px;font-weight:700;padding:6px 0;transition:opacity .3s}
.sprog__back[disabled]{opacity:0;pointer-events:none}
.sprog__dots{position:relative;display:flex;gap:26px;align-items:center}
.sprog__dots::before{content:"";position:absolute;left:5px;right:5px;top:50%;height:1px;background:rgba(0,0,0,.25)}
.sprog__dots li{position:relative;width:11px;height:11px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink);transition:background .4s,transform .5s var(--ease)}
.sprog__dots li.is-done{background:var(--ink)}
.sprog__dots li.is-on{transform:scale(1.45);box-shadow:inset 0 0 0 2px var(--ember)}

/* result panel */
.sr__k{font-family:var(--f-lat);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ember)}
.sr__style{margin-top:10px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.sr__jp{font-family:var(--f-jp);font-weight:900;font-size:clamp(36px,3.4vw,54px);line-height:1;letter-spacing:-.04em}
.sr__en{font-family:var(--f-lat);font-weight:700;font-size:15px;color:var(--ink-2)}
.sr__lead{margin-top:14px;font-family:var(--f-jp);font-weight:700;font-size:16px;line-height:1.6}
.sr__text{margin-top:8px;font-size:13.5px;line-height:1.85;color:var(--ink-2)}
.sr__words{margin-top:8px;font-family:var(--f-lat);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--mute)}
.sr__work{margin-top:18px;padding-top:16px;border-top:1px solid var(--ink);display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:center}
.sr__work canvas{width:118px;height:auto;box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(0,0,0,.12)}
.sr__wk{font-size:11.5px;font-weight:700;color:var(--mute)}
.sr__wt{margin-top:2px;font-family:var(--f-lat);font-weight:800;font-size:22px;letter-spacing:-.03em;line-height:1.1}
.sr__wj{font-size:13px;font-weight:500}
.sr__reason{margin-top:12px;font-size:13px;line-height:1.85;color:var(--ink-2)}
.sr__acts{margin-top:auto;padding-top:20px;display:grid;gap:10px}
.sr__acts .cbtn{width:100%}
.sr__retry{margin-top:12px;align-self:center;font-size:12.5px;font-weight:700;padding:6px 10px;text-decoration:underline;text-underline-offset:4px}
.sresult.is-on .panel__in>*{animation:qrise 1.4s var(--ease) both;animation-delay:.8s}
.sresult.is-on .panel__in>*:nth-child(n+2){animation-delay:1.1s}.sresult.is-on .panel__in>*:nth-child(n+5){animation-delay:1.6s}.sresult.is-on .panel__in>*:nth-child(n+8){animation-delay:2.4s}
@keyframes qrise{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}

@media (max-width:860px){
  .sp{display:inline}
  .shead__lead{font-size:13px}
  .shead__text{font-size:24px}
  .sbar__intro{justify-content:space-between}
  .sans{grid-template-columns:1fr;gap:8px}
  .sans__btn{min-height:52px;padding:6px 16px 6px 8px;font-size:15px}
  .sans__btn b{width:36px;height:36px;font-size:14px}
  .sprog{margin-top:10px}
  .sprog__dots{gap:18px}
  .sr__jp{font-size:34px}
  .sr__text,.sr__words{display:none}
  .sr__work{margin-top:12px;padding-top:12px;grid-template-columns:92px 1fr}
  .sr__work canvas{width:92px}
}
@media (max-height:520px) and (orientation:landscape){
  .stage{min-height:0}
  .shead__lead,.shead .eyebrow,.sbar__note{display:none}
  .shead .c-h1{font-size:20px;margin:0}
  .shead__text{font-size:20px}
  .band--top{top:calc(var(--hdr) + var(--tick) + 8px)}
  .band--bot{bottom:8px}
  .sans{grid-template-columns:1fr 1fr}
  .sans__btn{min-height:44px;font-size:13px}
  .sans__btn b{width:30px;height:30px}
  .sprog{margin-top:6px}
  .panel{left:auto;right:var(--gut);top:calc(var(--hdr) + var(--tick) + 8px);bottom:8px;width:min(360px,48vw);max-height:none;border-radius:0;transform:translateX(calc(100% + var(--gut) + 20px))}
  .panel__in{padding:14px 18px}
  .sr__lead,.sr__reason{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fl,.sresult.is-on .panel__in>*{animation:none;opacity:1;filter:none;transform:none}
}