.technology-section{background:#faf9fc;border-block:1px solid #f0ecf5}
.technology-vision{margin-top:70px}.technology-vision h2{font-size:clamp(29px,3.3vw,45px);line-height:1.3;margin:0 0 23px}.technology-vision>p{color:var(--muted);line-height:1.85}.technology-vision .vision-photo{margin-top:30px}
.technology-layout{display:grid;grid-template-columns:43% 57%;gap:0;align-items:center}
.technology-copy{padding-right:38px}.technology-copy h2{font-size:clamp(28px,2.8vw,40px);line-height:1.3;margin:0 0 22px}.technology-copy>p{font-size:15px;line-height:1.85;color:var(--muted);margin:0 0 14px}
.technology-principles{margin:30px 0 0}.technology-principles div{padding:15px 0;border-top:1px solid #eae5ef}.technology-principles dt{font-size:11px;font-weight:800;letter-spacing:.06em}.technology-principles dd{margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.7}
.technology-scene{position:relative;min-width:0;padding:20px 0}.technology-inputs{display:flex;justify-content:space-between;gap:6px}.technology-inputs span{padding:9px 8px;border:1px solid #e8e2ee;border-radius:12px;background:#fff;font-size:11px;color:#71667e;white-space:nowrap}
.technology-lines{display:block;width:100%;height:72px;fill:none;stroke:#b9a4dd;stroke-width:1;overflow:visible}.technology-lines path{stroke-dasharray:200;stroke-dashoffset:0}
.technology-core{width:210px;margin:auto;padding:17px 15px;text-align:center;border:1px solid #dcd0ee;background:white;border-radius:18px;box-shadow:0 8px 20px #34275805}.technology-core strong{display:block;font-size:25px;letter-spacing:-.04em}.technology-core small{display:block;font-size:9px;letter-spacing:.09em;color:#8a789e;margin-top:7px}
.technology-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:42px}.technology-result{min-width:0;padding:12px;border:1px solid #eee8f2;border-radius:16px;background:#fff;box-shadow:0 5px 15px #34275804}.technology-thumbnails{display:flex;gap:5px;margin-bottom:11px;height:63px}.technology-thumbnails img{min-width:0;flex:1;width:0;object-fit:cover;border-radius:7px}.technology-result h3{font-size:15px;line-height:1.4;margin:0 0 5px;letter-spacing:-.035em;min-height:21px}.technology-result p{font-size:11px;color:var(--muted);margin:0;line-height:1.5}
.technology-cycle{font-size:10px;text-align:center;color:#9689a1;margin:23px 0 0;line-height:1.8;word-spacing:2px}
@media(max-width:1000px){.technology-layout{grid-template-columns:1fr}.technology-copy{padding:0;max-width:680px}.technology-scene{width:min(100%,650px);margin:25px auto 0}.technology-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}}
@media(max-width:520px){.technology-copy h2{font-size:28px}.technology-copy>p{font-size:14px}.technology-principles{grid-template-columns:1fr;gap:0}.technology-inputs{flex-wrap:wrap;justify-content:center}.technology-inputs span{font-size:10px;padding:8px}.technology-thumbnails{height:48px}.technology-result{padding:9px}.technology-result h3{font-size:13px;min-height:36px}.technology-result p{font-size:10px}.technology-results{gap:10px}.technology-cycle{font-size:9px;word-spacing:0}}
@media(prefers-reduced-motion:reduce){.technology-section *{animation:none!important;transition:none!important}.js .technology-section:not(.is-visible) .technology-inputs span,.js .technology-section:not(.is-visible) .technology-core,.js .technology-section:not(.is-visible) .technology-result{opacity:1;transform:none}.js .technology-section:not(.is-visible) .technology-lines path{stroke-dashoffset:0}}

/* Give each story chapter a clear entrance and exit without adding empty pages. */
.technology-core{position:relative;width:235px;max-width:100%;height:180px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;border-radius:33px;background:linear-gradient(145deg,#fff 0%,#fbf9ff 55%,#f5f1ff 100%);border:1px solid rgba(124,92,255,.18);box-shadow:0 18px 45px rgba(70,50,120,.10);isolation:isolate;--shake-x:4px;--shake-r:1.5deg}
.technology-chip-surface{position:absolute;inset:1px;border-radius:31px;box-shadow:inset 0 2px 5px rgba(255,255,255,.95),inset 0 -2px 8px rgba(155,126,220,.045);pointer-events:none}
.technology-chip-port{position:absolute;width:4px;height:13px;border-radius:4px;background:#e3d9f6;pointer-events:none}
.technology-chip-port.port-top,.technology-chip-port.port-bottom{width:16px;height:4px;left:calc(50% - 8px)}
.technology-chip-port.port-top{top:-3px}.technology-chip-port.port-bottom{bottom:-3px}
.technology-chip-port.port-left-a{left:-3px;top:32%}.technology-chip-port.port-left-b{left:-3px;top:62%}
.technology-chip-port.port-right-a{right:-3px;top:32%}.technology-chip-port.port-right-b{right:-3px;top:62%}
.technology-scene:is(.is-shuffling,.is-creating) .technology-chip-port{background:#b29be8}
.technology-core strong{font-size:28px}.technology-core small{font-size:9px;margin-top:7px}
.technology-status{display:flex;align-items:center;justify-content:center;gap:6px;font-size:8px;letter-spacing:.07em;color:#8d79a6;margin-top:15px;min-height:12px}
.technology-status::before{content:'';width:5px;height:5px;border-radius:50%;background:#9874d9;flex-shrink:0}
.technology-core::before{content:'';position:absolute;left:15%;right:15%;height:15px;bottom:-18px;border-radius:50%;background:#825bd6;opacity:.09;filter:blur(5px);z-index:-1}
.technology-core::after{content:'';position:absolute;bottom:0;left:15%;width:70%;height:1px;background:linear-gradient(90deg,transparent,#a487e0,transparent);opacity:0;transform:scaleX(0);transform-origin:left}
.technology-regenerate{display:block;width:max-content;margin:14px auto 0;padding:6px 12px;border:0;background:transparent;color:#8c779f;font:inherit;font-size:11px;cursor:pointer;border-radius:15px;transition:color .2s,background .2s}
.technology-regenerate:hover{color:var(--purple);background:#f6f1fc}.technology-regenerate:focus-visible{outline:2px solid #b29aeb;outline-offset:3px}
.technology-lines:not(.output-lines){opacity:0;transition:opacity .2s}.technology-scene.is-shuffling .technology-lines:not(.output-lines){opacity:.7}
.technology-scene.is-shuffling .technology-lines:not(.output-lines) path{stroke-dasharray:25 175;animation:technology-input-trail .55s linear both}
.technology-inputs span{transition:transform .35s,opacity .35s;transform:none;opacity:.8}
.technology-scene.is-shuffling .technology-inputs span{transform:translateX(calc((2 - var(--i))*1.5px)) translateY(3px)}
.technology-scene.is-shuffling .technology-core{animation:technology-shuffle .55s cubic-bezier(.36,.07,.19,.97) both}
.technology-scene.is-shuffling .technology-core::before{animation:technology-field .55s ease both}
.technology-scene.is-creating .technology-status::before{animation:technology-status-pulse 1s ease-in-out infinite}
.technology-scene.is-sweeping .technology-core::after{animation:technology-sweep .5s ease-out both}
.technology-scene.is-pending .technology-content{opacity:0}
.technology-result{min-height:142px}
.technology-result.is-exiting .technology-content{animation:technology-exit .25s calc(var(--i)*70ms) ease both}
.technology-result.is-generating .technology-thumbnails img{animation:technology-photo-in .36s calc(var(--i)*220ms + var(--photo-i)*150ms) ease-out both}
.technology-result.is-generating h3{animation:technology-copy-in .4s calc(var(--i)*220ms + 620ms) ease-out both}
.technology-result.is-generating p{animation:technology-copy-in .4s calc(var(--i)*220ms + 760ms) ease-out both}
@keyframes technology-shuffle{0%,100%{transform:translateX(0) rotate(0);box-shadow:0 18px 45px rgba(65,45,120,.10)}22%{transform:translateX(calc(-1*var(--shake-x))) rotate(calc(-1*var(--shake-r)));box-shadow:3px 20px 45px rgba(65,45,120,.11)}44%{transform:translateX(var(--shake-x)) rotate(calc(var(--shake-r)*.87))}68%{transform:translateX(calc(var(--shake-x)*-.5)) rotate(calc(var(--shake-r)*-.47))}84%{transform:translateX(1px) rotate(.3deg)}}
@keyframes technology-field{50%{transform:scaleX(1.08)}100%{transform:scaleX(1)}}
@keyframes technology-status-pulse{50%{opacity:.45}0%,100%{opacity:.9}}
@keyframes technology-input-trail{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
@keyframes technology-sweep{0%{opacity:0;transform:scaleX(0)}35%{opacity:.55}100%{opacity:0;transform:scaleX(1)}}
@keyframes technology-exit{to{opacity:0;transform:translateY(6px) scale(.98)}}
@keyframes technology-photo-in{from{opacity:0;transform:translateY(6px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes technology-copy-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover){.technology-core:hover{translate:0 -2px}.technology-core{transition:translate .25s}}
@media(max-width:520px){.technology-core{--shake-x:2.8px;--shake-r:1.05deg;width:225px;height:174px}.technology-result{min-height:134px}}
@media(prefers-reduced-motion:reduce){.technology-content{opacity:1!important}.technology-core:hover{translate:none}.technology-lines:not(.output-lines){display:none}}
.about-page main>section:nth-child(-n+6):nth-child(odd){background:#faf8ff}
.about-page main>section:nth-child(-n+6):nth-child(even){background:#fff}
.about-page .brand-section:not(.brand-why){padding-block:clamp(110px,13svh,165px);box-sizing:border-box}
.about-page :is(.brand-how,.brand-ending){min-height:85svh;display:flex;align-items:center}
.about-page .technology-section{min-height:95svh}
.about-page .technology-vision{margin-top:0}
@media(max-width:760px){
  .about-page .brand-section:not(.brand-why){padding-block:90px}
  .about-page :is(.brand-how,.brand-ending){min-height:80svh}
  .about-page .technology-vision{margin-top:0}
}
@media(max-width:520px){
  .about-page .brand-section:not(.brand-why){padding-block:76px}
  .about-page .technology-vision{margin-top:0}
}