/* Shared, closed component surfaces for the optional Work React island. */
.work-interests{padding-block:clamp(64px,9vw,128px);display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,6vw,96px)}
.work-interests h2{font-size:clamp(32px,4vw,56px);font-weight:300;letter-spacing:-.03em;line-height:1.1;margin:0;text-wrap:balance}
.interest-list{min-width:0}.interest-list--raised{padding:8px 24px;background:#181522f5;border:1px solid #8b80ff33;border-radius:16px}
.interest-item{border-bottom:1px solid #c8c3d844}
.interest-heading{margin:0;font-size:inherit;font-weight:400}
.interest-trigger{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px;width:100%;padding:24px 0;background:none;border:0;color:#f5f3fa;font:inherit;font-size:clamp(20px,2vw,28px);text-align:left;cursor:pointer;list-style:none}
.interest-trigger::-webkit-details-marker{display:none}
.interest-trigger svg{width:24px;height:24px;flex-shrink:0;stroke:#7effde;stroke-width:1.4;transition:transform .3s}
.interest-trigger[data-state=open] svg,details[open]>.interest-trigger svg{transform:rotate(45deg)}
.interest-trigger:focus-visible,.corner-btn:focus-visible{outline:2px solid #7effde;outline-offset:6px}
.interest-content{overflow:hidden}
.interest-body{padding:0 0 32px}
.interest-body p{max-width:65ch;color:#c8c3d8;line-height:1.7;margin:0 0 24px}
.corner-btn-wrapper{position:relative;display:inline-flex;padding:12px;--accent:#8b80ff;--line-color:#7effde}
.corner-btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:48px;padding:12px 24px;background:var(--accent);color:#09090b;font:inherit;font-weight:600;text-decoration:none;border-radius:var(--control-radius);transition:transform .25s,background .25s}
.corner-btn svg{height:20px;width:20px;stroke:currentColor;stroke-width:1.4}
.corner-btn:hover{background:#a69cff;transform:translateY(-2px)}
.corner-btn:active{transform:translateY(0)}
.corner-line,.corner-dot{position:absolute;pointer-events:none;background:var(--line-color);opacity:0;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .25s}
.corner-line.horizontal{left:0;width:100%;height:1px;transform:scaleX(.6)}
.corner-line.vertical{top:0;height:100%;width:1px;transform:scaleY(.6)}
.corner-line.top,.corner-dot.top{top:0}.corner-line.bottom,.corner-dot.bottom{bottom:0}
.corner-line.left,.corner-dot.left{left:0}.corner-line.right,.corner-dot.right{right:0}
.corner-dot{width:4px;height:4px;border-radius:50%;transform:scale(.2)}
.corner-btn-wrapper:is(:hover,:focus-within) :is(.corner-line,.corner-dot){opacity:1;transform:scale(1)}
@media(max-width:700px){.work-interests{grid-template-columns:1fr;gap:32px}.interest-trigger{min-height:80px}.corner-btn{padding:12px 16px}}
@media(prefers-reduced-motion:reduce){.work-interests *,.work-interests *::before,.work-interests *::after{transition:none!important;animation:none!important}}

.interest-stack{display:grid;gap:24px}.next-paths{display:grid;gap:24px;padding:24px;border:1px solid #8b80ff33;border-radius:16px;background:#181522f5}.next-paths h3,.next-path-panel h4{margin:0;font-size:24px;line-height:1.25;font-weight:400}.next-path-tabs{display:flex;flex-wrap:wrap;gap:8px;position:relative}.next-path-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 16px;border:1px solid #c8c3d844;border-radius:var(--control-radius);background:none;color:#c8c3d8;font:inherit;cursor:pointer;position:relative}.next-path-tabs button[data-state=active]{background:#8b80ff;color:#09090b;border-color:#8b80ff}.next-path-tabs button:focus-visible{outline:2px solid #7effde;outline-offset:4px}.next-path-tabs svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.4}.next-path-separator{height:1px;background:#8b80ff33;margin-top:24px}.next-path-panel{padding-top:24px;min-height:192px}.next-path-panel p{max-width:60ch;color:#c8c3d8;line-height:1.7}.next-path-fallback{display:grid;gap:16px}.next-path-fallback a{display:grid;gap:8px;min-height:44px}.next-path-fallback span{color:#c8c3d8}.next-path-fallback a:focus-visible{outline:2px solid #7effde;outline-offset:4px}

.next-path-panel[data-state=active]{animation:path-enter .22s ease-out}@keyframes path-enter{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
