/* Home: the three steps under the form (§2.1) */
[data-discovery] .steps{position:relative;z-index:7;margin:24px 0 0;padding:16px;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px}
[data-discovery] .steps-h{margin:0 0 12px;font-size:12px;line-height:1.5;font-weight:700;letter-spacing:.12em;color:var(--metal)}
[data-discovery] .steps ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
[data-discovery] .steps li{display:grid;align-content:start;gap:2px;padding-top:10px;border-top:1px solid var(--metal)}
[data-discovery] .steps .n{font-family:var(--font-voice);font-size:20px;line-height:1.2;color:var(--price)}
[data-discovery] .steps .t{font-size:15px;line-height:1.5;font-weight:700;color:var(--text)}
[data-discovery] .steps .d{font-size:12px;line-height:1.5;color:var(--text-2)}
@media (max-width:359px){
[data-discovery] .steps ol{grid-template-columns:1fr}
[data-discovery] .steps li{grid-template-columns:2.2em 1fr;column-gap:8px}
[data-discovery] .steps .n{grid-row:span 2}
}

/* Hero blink (§4.4.1): the eye box over the figure, same box and pose; one key at a time via data-eye */
[data-discovery] .fig.blink{display:block;aspect-ratio:2/3}
[data-discovery] .fig.blink .eye{position:absolute;left:38.281%;top:10.156%;width:15.234%;height:auto;max-width:none;opacity:0}
[data-discovery][data-eye="half"] .fig.blink .eye.half,[data-discovery][data-eye="closed"] .fig.blink .eye.closed{opacity:1}

/* Guide (§2.7): DOKUNA's avatar above (phone) or beside (≥768) the current line and question */
[data-discovery] .guide-entry{position:relative;z-index:7;margin:16px 0 0;text-align:center}
[data-discovery] .guide-entry .btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;text-decoration:none}
[data-discovery] .guide{display:grid;gap:16px;padding:0 16px 32px}
[data-discovery] .guide-stage{position:relative;margin:0 -16px;aspect-ratio:1/0.92;overflow:hidden;background:radial-gradient(ellipse at 50% 32%,#3A1F28,var(--stage) 70%)}
[data-discovery] .avatar-rig{position:absolute;left:50%;top:0;width:min(100%,420px);aspect-ratio:2/3;transform:translateX(-50%)}
[data-discovery] .avatar-rig .breath,[data-discovery] .avatar-rig .sway{position:absolute;inset:0;transform-origin:50% 100%}
[data-discovery] .avatar-rig .base{position:absolute;left:0;top:0;width:100%;height:auto}
[data-discovery] .fig.blink.avatar-eyes{left:0;top:0;width:100%}
[data-discovery] .fig.blink.avatar-eyes .eye{left:38.574%;top:22.135%;width:27.832%}
[data-discovery] .guide-ai{margin:0;font-size:12px;line-height:1.5;color:var(--text-2)}
[data-discovery] .guide-line{padding:12px 16px;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px}
[data-discovery] .guide-line .voice{max-inline-size:none}
[data-discovery] .guide-conds{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
[data-discovery] .guide-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
[data-discovery] .guide-choices .chip{min-height:52px}
[data-discovery] .guide-start{display:grid;gap:12px}
[data-discovery] .guide-input{width:100%;min-height:52px;padding:0 14px;font-size:16px;background:var(--surface);color:var(--text);border:1px solid var(--line-on-surface);border-radius:8px}
[data-discovery] .guide-go .btn-primary,[data-discovery] .guide-start .btn-primary{width:100%;min-height:52px}
[data-discovery] .guide-foot{display:grid;gap:4px;margin:8px 0 0;font-size:14px}
@media (prefers-reduced-motion:no-preference){
[data-discovery] .avatar-rig .breath{animation:dk-breath 4.6s ease-in-out infinite}
[data-discovery] .avatar-rig .sway{animation:dk-sway 9s ease-in-out infinite}
}
/* Mood chips under the modifiers (§3.2): they wrap, unlike the four modifier chips */
[data-discovery] .home .counter .mods.moods{flex-wrap:wrap;margin-top:8px}
[data-discovery] .home .counter .mods.moods .chip{flex:0 0 auto;min-width:0;padding:0 14px}

/* この端末の好み (§2.9): 動き「少なくする」 and 画像「控えめ」 (set by app.js from localStorage) */
[data-discovery][data-motion-pref="less"] .avatar-rig .breath,[data-discovery][data-motion-pref="less"] .avatar-rig .sway{animation:none}
[data-discovery][data-images="few"] img.jk{filter:blur(14px) saturate(.5)}
[data-discovery] .guide-entry .pref-link{display:block;margin-top:12px;font-size:14px}
[data-discovery] .prefs{display:grid;gap:16px;margin:16px;padding:20px 16px}
[data-discovery] .prefs h1{margin:0;font-size:24px}
[data-discovery] .pref-form{display:grid;gap:16px}
[data-discovery] .pref-form fieldset{margin:0;padding:12px 0 0;border:0;border-top:1px solid var(--line)}
[data-discovery] .pref-form legend{padding:0;font-weight:700}
[data-discovery] .pref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:4px 12px}
[data-discovery] .pref-choice,[data-discovery] .pref-switch{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-right:16px}
[data-discovery] .pref-choice input,[data-discovery] .pref-switch input{width:20px;height:20px}
[data-discovery] .pref-actions .btn-primary{width:100%;min-height:52px}
[data-discovery] .pref-danger{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
[data-discovery] .pref-note{margin:0;padding:8px 12px;border:1px solid var(--line-strong);border-radius:8px}
@keyframes dk-breath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.004,1.01)}}
@keyframes dk-sway{0%,100%{transform:rotate(-.45deg) translateX(-1px)}50%{transform:rotate(.45deg) translateX(1px)}}

/* ≥768: the right column sits in the middle of the viewport, beside DOKUNA (§2.1) */
@media (min-width:768px){
[data-discovery] body[data-screen="home"] main.page{align-content:center}
[data-discovery] .home .voice{font-size:32px;line-height:1.45;margin-bottom:32px}
[data-discovery] .steps{margin:24px 16px 0}
[data-discovery] .home .counter-plate{right:0}
[data-discovery] main.page:has(>.guide){max-width:1040px}
[data-discovery] .guide{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding:24px 16px 48px}
[data-discovery] .guide-stage{margin:0;aspect-ratio:2/2.4;border-radius:16px}
}