/* A readable vertical section first; JavaScript adds the pinned horizontal scene. */
.about-scroll{padding-block:72px;background:#fff;border-top:1px solid var(--line)}
.about-pin{max-width:1440px;margin-inline:auto}
.about-topline{display:flex;align-items:center;gap:24px;margin-bottom:24px;min-height:44px}
.about-topnote{margin-left:auto;font-size:11px;color:var(--muted)}
.about-controls{display:flex;gap:8px;margin-left:auto}
.about-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #dce3ef;border-radius:50%;background:#fff;color:var(--blue);font-size:21px;transition:background .2s,transform .2s}
.about-controls button:hover:not(:disabled){background:#edf3ff;transform:translateY(-2px)}
.about-window{min-width:0;border-radius:24px;outline-offset:6px}
.about-rail{display:grid;gap:24px}
.about-panel{position:relative;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:clamp(24px,5vw,80px);min-width:0;padding:clamp(28px,4.5vw,68px);border:1px solid #e1e8f4;border-radius:24px;background:#f6f8fc}
.about-panel-copy{min-width:0}.about-kicker{display:block;margin-bottom:24px;color:#65738c;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.about-panel h2,.about-panel h3{max-width:12ch;font-size:clamp(36px,4.2vw,68px);line-height:1.04;letter-spacing:-.065em;font-weight:500}
.about-panel h3{max-width:16ch}.about-panel h2 em,.about-panel h3 em{font-style:normal;color:var(--blue)}
.about-panel-copy>p{max-width:43ch;margin-top:24px;font-size:clamp(13px,1.1vw,16px);line-height:1.75;color:#626b7b}
.about-panel-note{display:block;margin-top:28px;font-size:11px;color:#667185}
.about-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}.about-tags li{padding:8px 12px;border:1px solid #dbe5f3;border-radius:100px;background:#fff;font-size:10px;color:#516279}
.about-next-link{display:inline-flex;align-items:center;gap:24px;min-height:44px;margin-top:24px;font-size:12px;color:var(--blue)}.about-next-link:hover{text-decoration:underline;text-underline-offset:5px}
.about-art{position:relative;width:100%;max-width:390px;justify-self:center}.about-orbit{aspect-ratio:1;display:grid;place-items:center}
.about-orbit-ring{position:absolute;inset:7%;border:1px solid #cfdcf3;border-radius:50%;transform:rotate(-25deg)}.about-orbit-ring::after{content:'';position:absolute;inset:16%;border:1px dashed #c2d3f0;border-radius:50%}
.about-orbit-center{z-index:1;padding:25px 28px;border:1px solid #e2e8f4;border-radius:18px;background:#fff;box-shadow:0 18px 40px -18px #24457340;font-size:clamp(22px,2.5vw,38px);font-weight:600;letter-spacing:-.065em}.about-orbit-center>span{color:var(--blue)}
.about-orbit-label{position:absolute;padding:12px 18px;border-radius:100px;background:#fff;border:1px solid #dce6f5;font-size:11px;box-shadow:0 10px 24px -12px #24457333}.about-label-one{top:8%;left:7%}.about-label-two{right:0;top:30%}.about-label-three{bottom:9%;right:8%;background:var(--blue);border-color:var(--blue);color:#fff}
.about-understand{background:#f0f5ff}.about-brief{padding:28px;background:#fff;border:1px solid #dce5f5;border-radius:18px;box-shadow:0 22px 44px -24px #254b8540;transform:rotate(-3deg)}
.about-art-label{display:block;margin-bottom:24px;font-size:10px;color:#7b879b;text-transform:uppercase;letter-spacing:.08em}.about-brief-row{display:flex;align-items:center;gap:14px;padding:20px 0;border-top:1px solid #edf0f5}.about-brief-row>span{font-size:10px;color:#99a6b9}.about-brief-row strong{font-size:16px;font-weight:500;letter-spacing:-.03em}.about-brief-row>b{margin-left:auto;color:var(--blue);font-weight:400}.about-brief-foot{display:block;margin-top:18px;font-size:10px;color:#7a879a}
.about-create{background:#faf9f7}.about-browser{padding:18px;border:1px solid #e1e4eb;border-radius:16px;background:#fff;box-shadow:0 26px 46px -24px #24395f40;transform:rotate(3deg)}.about-browser-bar{display:flex;align-items:center;gap:4px;padding-bottom:18px}.about-browser-bar>i{width:5px;height:5px;background:#d3dcec;border-radius:50%}.about-browser-bar>span{margin-left:auto;font-size:8px;color:#8590a3}.about-browser-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;padding:28px 10px}.about-browser-line{display:block;height:10px;border-radius:4px;background:#ccd9ee;margin-bottom:9px}.about-browser-line.short{width:60%;background:#e6ecf6}.about-browser-button{display:inline-block;margin-top:15px;padding:9px 12px;border-radius:5px;background:var(--blue);color:#fff;font-size:9px}.about-browser-shape{aspect-ratio:1;border-radius:50% 50% 12px 12px;background:#edf3ff;display:grid;place-items:center}.about-browser-shape>span{font-size:32px;letter-spacing:-.1em;color:var(--blue)}.about-browser-tiles{display:flex;gap:10px;padding-top:10px}.about-browser-tiles>span{flex:1;height:42px;border:1px solid #edf0f6;border-radius:6px}
.about-refine{background:#f2f6fc}.about-finish{padding:38px;border:1px solid #dce5f3;border-radius:20px;background:#fff;box-shadow:0 24px 44px -22px #243d6940}.about-finish-check{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:var(--blue);background:#ecf3ff;font-size:26px;margin-bottom:26px}.about-finish>strong{display:block;font-size:clamp(25px,3vw,42px);font-weight:500;line-height:1.18;letter-spacing:-.05em}.about-finish>span:last-child{display:block;margin-top:24px;font-size:11px;color:#7a879a}
.about-position{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.about-horizontal{padding-block:0}.about-horizontal .about-pin{position:sticky;top:var(--header-height);height:calc(100svh - var(--header-height));display:flex;flex-direction:column;padding-block:24px;min-height:0}
.about-horizontal .about-topline{flex:0 0 auto;margin-bottom:18px}.about-horizontal .about-window{flex:1;min-height:0;overflow:hidden}.about-horizontal .about-rail{display:flex;height:100%;gap:24px;will-change:transform}.about-horizontal .about-panel{flex:0 0 100%;height:100%;overflow-y:auto;scrollbar-width:none}
@media(max-width:760px){.about-scroll{padding-inline:20px;padding-block:48px}.about-horizontal{padding-block:0}.about-horizontal .about-pin{padding-block:14px}.about-topline{gap:12px}.about-topnote{display:none}.about-controls{gap:6px}.about-controls button{width:40px;height:40px}.about-panel{grid-template-columns:1fr;gap:20px;padding:26px;border-radius:18px}.about-window{border-radius:18px}.about-kicker{margin-bottom:16px;font-size:9px}.about-panel h2,.about-panel h3{font-size:clamp(32px,7.5vw,48px)}.about-panel-copy>p{font-size:13px;line-height:1.65;margin-top:16px}.about-panel-note{font-size:10px;margin-top:18px}.about-tags{margin-top:18px;gap:6px}.about-tags li{padding:6px 9px;font-size:9px}.about-next-link{margin-top:16px;font-size:11px}.about-art{max-width:220px}.about-orbit{max-width:190px}.about-orbit-center{padding:17px 20px;font-size:25px}.about-orbit-label{padding:7px 10px;font-size:8px}.about-brief{padding:18px;max-width:250px}.about-art-label{margin-bottom:12px;font-size:8px}.about-brief-row{padding:10px 0}.about-brief-row strong{font-size:13px}.about-brief-foot{font-size:8px;margin-top:10px}.about-browser{padding:12px;max-width:240px}.about-browser-layout{padding:12px 5px;gap:14px}.about-browser-tiles>span{height:25px}.about-browser-bar{padding-bottom:8px}.about-browser-line{height:7px;margin-bottom:6px}.about-browser-button{margin-top:7px;font-size:8px;padding:7px}.about-finish{padding:22px;max-width:220px}.about-finish-check{width:36px;height:36px;font-size:20px;margin-bottom:14px}.about-finish>strong{font-size:26px}.about-finish>span:last-child{font-size:9px;margin-top:14px}}
@media(max-width:760px) and (max-height:740px){.about-horizontal .about-art{display:none}.about-horizontal .about-panel{align-content:center}.about-horizontal .about-panel h2,.about-horizontal .about-panel h3{font-size:clamp(32px,8vw,44px)}}
@media(min-width:761px) and (max-height:650px){.about-horizontal .about-panel{padding:24px 36px;gap:32px}.about-horizontal .about-panel h2,.about-horizontal .about-panel h3{font-size:38px}.about-horizontal .about-kicker{margin-bottom:12px}.about-horizontal .about-panel-copy>p{font-size:12px;margin-top:14px}.about-horizontal .about-art{max-width:240px}.about-horizontal .about-panel-note,.about-horizontal .about-tags{margin-top:14px}.about-horizontal .about-brief-row{padding:12px 0}.about-horizontal .about-finish{padding:24px}.about-horizontal .about-finish>strong{font-size:28px}}
@media(prefers-reduced-motion:reduce){.about-controls button{transition:none}.about-controls button:hover:not(:disabled){transform:none}}

.about-horizontal .about-panel::-webkit-scrollbar{display:none}