.hero-ia { display: inline-block; color: #cbb4ff; font-family: var(--serif); font-size: 1.65em; line-height: .8; text-transform: none; letter-spacing: -.06em; vertical-align: -.07em; text-shadow: 0 0 30px #7c3cff55; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.flow-step { transition: opacity .3s, transform .3s, background .3s; }
.flow-step > span { display:grid; }
.flow-step > span[data-text]::before { content:attr(data-text); visibility:hidden; grid-area:1 / 1; }
.typed-label { grid-area:1 / 1; }
.flow-step.is-waiting { opacity:.28; transform:translateX(8px); }
.flow-step.is-typing { background:#ece4ff; }
.flow-step.is-typing .typed-label::after { content:""; display:inline-block; height:1em; margin-left:3px; border-right:2px solid var(--violet); vertical-align:-.1em; }
.flow-replay { background:transparent; border:0; color:#5930a6; font:600 .75rem var(--sans); cursor:pointer; margin:12px 0 0; padding:8px 0; }
.flow-replay:disabled { opacity:.5; cursor:default; }
.method-workshop { min-width:0; background:#fff; border:1px solid var(--line); border-radius:24px; padding:24px; box-shadow:0 18px 60px #172b4710; }
.workshop-header { display:flex; justify-content:space-between; gap:16px; margin-bottom:20px; font-size:.6rem; letter-spacing:.1em; color:var(--muted); }
.method-phase { border-bottom:1px solid var(--line); }
.method-phase:last-child { border-bottom:0; }
.method-phase summary { display:grid; grid-template-columns:40px 1fr 24px; gap:14px; align-items:center; padding:23px 0; list-style:none; cursor:pointer; }
.method-phase summary::-webkit-details-marker { display:none; }
.method-phase summary > span { font:italic 1.8rem var(--serif); color:#9a80bd; }
.method-phase summary h3 { margin:0; font-size:1rem; line-height:1.4; }
.method-phase summary b { font-size:1.4rem; color:var(--violet); transition:transform .25s; }
.method-phase[open] summary b { transform:rotate(90deg); }
.method-phase[open] summary > span { color:var(--violet); }
.phase-body { padding:0 0 26px 54px; }
.phase-body p { font-size:.88rem; color:var(--muted); margin:16px 0; }
.phase-body small { color:#6430aa; font-size:.72rem; font-weight:700; }
.phase-art { position:relative; isolation:isolate; overflow:hidden; height:145px; background:#f1ecfa; border-radius:16px; }
.phase-art::before { content:""; position:absolute; inset:0; background-image:radial-gradient(#7c3cff20 1px,transparent 1px); background-size:16px 16px; }
.phase-art span { position:absolute; left:18px; bottom:12px; font-size:.55rem; letter-spacing:.15em; font-weight:700; color:#583693; }
.phase-art i { position:absolute; display:block; background:#7c3cff; box-shadow:0 12px 24px #7c3cff22; }
.art-discover i { border-radius:50%; width:72px; height:72px; left:calc(50% - 36px); top:22px; border:1px solid #7c3cff; background:#7c3cff12; }
.art-discover i:nth-child(2) { transform:scale(.65); background:#7c3cff33; }
.art-discover i:nth-child(3) { transform:scale(.28); background:#7c3cff; }
.art-design i { width:82px; height:64px; border:2px solid white; border-radius:10px; top:25px; left:calc(50% - 64px); transform:rotate(-14deg); }
.art-design i:nth-child(2) { left:calc(50% - 24px); top:35px; background:#25c8ef; transform:rotate(9deg); }
.art-design i:nth-child(3) { width:40px; height:40px; left:calc(50% + 15px); top:25px; background:#d6ff66; transform:rotate(25deg); }
.art-connect::after { content:""; position:absolute; z-index:-1; top:60px; left:22%; right:22%; border-top:2px dashed #7c3cff; }
.art-connect i { width:42px; height:42px; border-radius:12px; top:39px; left:calc(25% - 21px); }
.art-connect i:nth-child(2) { left:calc(50% - 21px); background:#25c8ef; }
.art-connect i:nth-child(3) { left:calc(75% - 21px); background:#b2db49; }
.art-grow i { width:36px; height:35px; bottom:38px; left:calc(50% - 65px); border-radius:7px 7px 0 0; }
.art-grow i:nth-child(2) { left:calc(50% - 18px); height:57px; background:#25c8ef; }
.art-grow i:nth-child(3) { left:calc(50% + 29px); height:83px; background:#91bd26; }
.method-phase[open] .phase-art { animation:phase-enter .45s ease both; }
@keyframes phase-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.agent-orbit { display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center; margin-top:36px; }
.orbit-wheel { position:relative; width:100%; max-width:580px; aspect-ratio:1; margin:auto; isolation:isolate; }
.orbit-wheel::before, .orbit-wheel::after { content:""; position:absolute; inset:15%; border:1px dashed #7c3cff50; border-radius:50%; z-index:-1; }
.orbit-wheel::after { inset:28%; border-style:solid; border-color:#7c3cff15; box-shadow:0 0 80px #7c3cff08; }
.orbit-core { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.orbit-core img { border-radius:18px; display:block; margin:0 auto 12px; }
.orbit-core span { font:italic 1.08rem/1.3 var(--serif); color:#57328b; }
.orbit-step { position:absolute; top:var(--y); left:var(--x); transform:translate(-50%,-50%); width:clamp(112px,12vw,150px); height:122px; padding:14px; border:2px solid transparent; border-radius:18px; text-align:left; color:white; background:linear-gradient(180deg,#0e122528,#0e1225ed 65%),var(--scene) center 30%/cover; cursor:pointer; box-shadow:0 8px 24px #16152e20; transition:border-color .2s, box-shadow .2s, scale .2s; }
.orbit-step small { position:absolute; top:9px; left:12px; color:#d6ff66; font-size:.65rem; font-weight:700; }
.orbit-step strong { display:block; position:absolute; bottom:12px; left:12px; right:10px; font-size:.79rem; line-height:1.28; }
.orbit-step.is-active { border-color:#7c3cff; box-shadow:0 0 0 5px #7c3cff13,0 16px 32px #35185d30; scale:1.04; }
.orbit-hint { font-size:.72rem; color:#626879; margin:0 0 12px; }
.orbit-detail { position:relative; min-height:405px; padding:26px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; border-radius:26px; background:linear-gradient(180deg,#0d102228 15%,#0d1022ec 68%,#0d1022 100%),var(--scene) center top/cover; color:#fff; box-shadow:0 24px 55px #10152d26; }
.orbit-counter { align-self:flex-start; padding:7px 11px; border:1px solid #ffffff35; border-radius:30px; background:#10152dc9; font-size:.61rem; letter-spacing:.15em; color:#d6ff66; }
.orbit-detail h3 { margin:0 0 12px; font:1.95rem/1.12 var(--serif); }
.orbit-detail p { margin:0; font-size:.86rem; line-height:1.65; color:#e0e3f1; }
.orbit-controls:not([hidden]) { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:17px; }
.orbit-controls span { font-size:.64rem; color:#626879; }
.orbit-controls button { width:42px; height:42px; border:1px solid #7c3cff30; border-radius:50%; color:#6331ae; background:#fff; cursor:pointer; font-size:1.2rem; }
.orbit-step:focus-visible, .orbit-controls button:focus-visible, .method-phase summary:focus-visible, .flow-replay:focus-visible { outline:3px solid #6530b1; outline-offset:5px; }
@media (hover:hover) { .orbit-controls button:hover { background:#7c3cff; color:#fff; } .method-phase summary:hover h3 { color:#7133ce; } }
@media (max-width:980px) { .agent-orbit { gap:24px; grid-template-columns:1fr 1fr; } .orbit-step { width:112px; height:106px; } .orbit-detail { min-height:380px; padding:24px; } .orbit-core img { width:48px; height:48px; } .orbit-core span { font-size:.9rem; } }
@media (max-width:760px) { .agent-orbit { grid-template-columns:1fr; gap:18px; } .orbit-wheel { max-width:440px; } .orbit-step { width:120px; height:110px; } .orbit-story { max-width:520px; width:100%; margin:auto; } .orbit-detail { min-height:360px; background-position:center,center 35%; } }
@media (max-width:480px) { .orbit-wheel { aspect-ratio:.93; } .orbit-step { width:clamp(82px,26vw,112px); height:94px; border-radius:14px; padding:9px; } .orbit-step strong { left:8px; right:6px; bottom:10px; font-size:.66rem; } .orbit-step small { left:8px; top:7px; font-size:.6rem; } .orbit-step[data-step="3"] { top:86%; } .orbit-step[data-step="0"] { top:14%; } .orbit-detail { min-height:350px; padding:22px; } .orbit-detail h3 { font-size:1.7rem; } .orbit-core span { font-size:.82rem; } .orbit-core img { width:42px; height:42px; border-radius:12px; margin-bottom:8px; } .method-workshop { padding:18px; border-radius:20px; } .method-phase summary { grid-template-columns:30px 1fr 20px; gap:10px; } .method-phase summary h3 { font-size:.87rem; } .phase-body { padding-left:0; } .workshop-header { font-size:.51rem; letter-spacing:.06em; } }
@media (prefers-reduced-motion:reduce) { .flow-step, .orbit-step, .method-phase summary b { transition:none; } .method-phase[open] .phase-art { animation:none; } }