:root{--white: #ffffff;--ink: #0b0d12;--ink-secondary: #545c6b;--ink-muted: #8b93a2;--blue: #1a63ed;--blue-deep: #1450c4;--blue-tint: rgba(26, 99, 237, .08);--line: rgba(11, 13, 18, .11);--line-soft: rgba(11, 13, 18, .055);--cut: 34px;--card-width: 820px;--pad-x: clamp(28px, 4vw, 56px);--pad-y: clamp(30px, 3.6vw, 52px);--spec-width: 220px;--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--ease: cubic-bezier(.22, .61, .36, 1);--mx: .5;--my: .5;--tilt-x: 0deg;--tilt-y: 0deg}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}html,body{height:100%}body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:24px;overflow:hidden;background:var(--white);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{background:var(--blue);color:var(--white)}:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:2px}.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;animation:fade .7s var(--ease) forwards}.backdrop__grid{position:absolute;inset:-10%;background-image:linear-gradient(to right,var(--line-soft) 1px,transparent 1px),linear-gradient(to bottom,var(--line-soft) 1px,transparent 1px);background-size:78px 78px;-webkit-mask-image:radial-gradient(ellipse 55% 55% at 50% 50%,transparent 18%,#000 78%);mask-image:radial-gradient(ellipse 55% 55% at 50% 50%,transparent 18%,#000 78%);transform:translate3d(calc((var(--mx) - .5) * -14px),calc((var(--my) - .5) * -14px),0);transition:transform .42s var(--ease)}.backdrop__axis{position:absolute;background:var(--line-soft)}.backdrop__axis--h{left:0;right:0;top:50%;height:1px;background:linear-gradient(to right,transparent,var(--line-soft) 22%,var(--line-soft) 78%,transparent)}.backdrop__axis--v{top:0;bottom:0;left:50%;width:1px;background:linear-gradient(to bottom,transparent,var(--line-soft) 22%,var(--line-soft) 78%,transparent)}.backdrop__glow{position:absolute;border-radius:50%;filter:blur(90px)}.backdrop__glow--follow{width:46vmax;height:46vmax;top:0;left:0;background:radial-gradient(circle,#1a63ed33,#1a63ed00 68%);transform:translate3d(calc(var(--mx) * 100vw - 23vmax),calc(var(--my) * 100dvh - 23vmax),0);transition:transform .52s var(--ease)}.backdrop__glow--static{width:40vmax;height:40vmax;right:-12vmax;bottom:-16vmax;background:radial-gradient(circle,#1a63ed1a,#1a63ed00 70%)}.mark{position:absolute;width:11px;height:11px;opacity:.45;transform:translate3d(calc((var(--mx) - .5) * 20px),calc((var(--my) - .5) * 20px),0);transition:transform .42s var(--ease)}.mark:before,.mark:after{content:"";position:absolute;background:var(--blue)}.mark:before{left:50%;top:0;width:1px;height:100%}.mark:after{top:50%;left:0;height:1px;width:100%}.mark--tl{top:40px;left:40px}.mark--tr{top:40px;right:40px}.mark--bl{bottom:40px;left:40px}.mark--br{bottom:40px;right:40px}.stage{position:relative;z-index:1;width:100%;display:grid;place-items:center}.card{position:relative;width:min(var(--card-width),calc(100vw - 32px));transform:perspective(1600px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transform-style:preserve-3d;transition:transform .5s var(--ease);filter:drop-shadow(0 2px 4px rgba(11,13,18,.04)) drop-shadow(0 28px 60px rgba(11,13,18,.09))}.card__frame{padding:1px;background:var(--line);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);opacity:0;animation:frame-in .62s var(--ease) 60ms forwards}.card__body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--spec-width);background:var(--white);clip-path:polygon(0 0,calc(100% - var(--cut) + 1px) 0,100% calc(var(--cut) - 1px),100% 100%,0 100%)}.card__cut{position:absolute;top:0;left:calc(100% - var(--cut) + 1px);width:calc(var(--cut) * 1.4142);height:2px;background:var(--blue);transform-origin:0 0;transform:rotate(45deg) scaleX(0);animation:cut-in .62s var(--ease) .32s forwards}.card__main{padding:var(--pad-y) var(--pad-x);display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px);min-width:0}.identity{margin:0}.name{margin:0;font-size:clamp(2.15rem,5.4vw,3.5rem);line-height:1.02;letter-spacing:-.035em;font-weight:600;color:var(--ink);opacity:0;animation:rise .62s var(--ease) .18s forwards}.role{margin:clamp(8px,1.2vw,14px) 0 0;font-size:clamp(1.25rem,2.9vw,1.95rem);line-height:1.1;letter-spacing:-.02em;font-weight:500;color:var(--blue);opacity:0;animation:rise .62s var(--ease) .26s forwards}.rule{display:block;width:64px;height:2px;margin-top:clamp(16px,2vw,22px);background:var(--blue);transform-origin:left center;transform:scaleX(0);animation:rule-in .62s var(--ease) .36s forwards;transition:width .45s var(--ease)}.card:hover .rule,.card:focus-within .rule{width:108px}.statement{margin:0;max-width:42ch;font-size:clamp(.92rem,1.5vw,1.02rem);line-height:1.6;color:var(--ink-secondary);text-wrap:pretty;opacity:0;animation:rise .62s var(--ease) .33s forwards}.stack{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);opacity:0;animation:rise .62s var(--ease) .4s forwards}.stack li{position:relative;padding-left:14px}.stack li:before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;margin-top:-2px;background:var(--blue);opacity:.6}.foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:clamp(6px,1.6vw,16px);padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--line-soft);opacity:0;animation:rise .62s var(--ease) .47s forwards}.links{display:flex;flex-wrap:wrap;gap:12px}.link{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--line);border-radius:2px;background:var(--white);color:var(--ink-secondary);transition:color .26s var(--ease),border-color .26s var(--ease),transform .26s var(--ease),box-shadow .26s var(--ease)}.link svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.link:hover,.link:focus-visible{color:var(--blue);border-color:#1a63ed52;transform:translateY(-2px);box-shadow:0 8px 18px #1a63ed1f}.card__spec{position:relative;display:flex;align-items:stretch;padding:var(--pad-y) clamp(16px,1.8vw,22px);border-left:1px solid var(--line-soft);opacity:0;animation:fade .62s var(--ease) .42s forwards}.card__spec:before{content:"";position:absolute;left:-1px;top:0;width:1px;height:100%;background:linear-gradient(to bottom,transparent,var(--blue),transparent);transform:scaleY(0);transform-origin:top center;transition:transform .7s var(--ease)}.card:hover .card__spec:before,.card:focus-within .card__spec:before{transform:scaleY(1)}.code{display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;overflow:hidden;font-family:var(--mono);font-size:10.5px;line-height:1.78;color:var(--ink);opacity:.5;transition:opacity .42s var(--ease);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 26%,#000 100%);mask-image:linear-gradient(to bottom,transparent,#000 26%,#000 100%);animation:fade .7s var(--ease) .42s backwards}.card:hover .code,.card:focus-within .code{opacity:.72}.code__line{min-height:1.78em;white-space:pre}.code__line:last-child:after{content:"\258f";margin-left:1px;color:var(--blue);animation:blink 1.05s steps(1,end) infinite}.tok-kw{color:var(--blue)}.tok-fn{color:var(--ink)}.tok-str,.tok-num{color:var(--ink-secondary)}.tok-ok{color:var(--blue)}.tok-cm{color:var(--ink-muted)}.status{position:absolute;top:-17px;left:clamp(24px,4vw,52px);z-index:2;display:inline-flex;align-items:center;gap:9px;margin:0;padding:8px 15px;background:var(--white);border:1px solid var(--line);border-radius:2px;box-shadow:0 6px 16px #0b0d120f;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-secondary);opacity:0;animation:rise .62s var(--ease) .54s forwards}.status__dot{position:relative;width:6px;height:6px;border-radius:50%;background:var(--blue);transition:background .4s var(--ease)}.status[data-state=away] .status__dot{background:var(--ink-muted)}.status[data-state=away] .status__dot:after{display:none}.status__time{color:var(--ink);font-variant-numeric:tabular-nums}.status__time:before{content:"\b7";margin:0 5px 0 3px;color:var(--ink-muted)}.status__time i{font-style:normal;animation:blink 1.05s steps(1,end) infinite}.status__dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);animation:pulse 2.6s ease-out infinite}@keyframes fade{to{opacity:1}}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes frame-in{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@keyframes rule-in{to{transform:scaleX(1)}}@keyframes cut-in{to{transform:rotate(45deg) scaleX(1)}}@keyframes blink{0%,50%{opacity:1}50.01%,to{opacity:0}}@keyframes pulse{0%{transform:scale(1);opacity:.5}70%,to{transform:scale(3.4);opacity:0}}@media(max-width:760px){:root{--cut: 24px;--spec-width: auto;--pad-y: clamp(26px, 6vw, 40px)}body{padding:16px}.card{width:calc(100vw - 32px)}.card__body{grid-template-columns:1fr}.card__main{padding-bottom:clamp(22px,5vw,30px)}.card__spec{padding:clamp(14px,3.4vw,18px) var(--pad-x);border-left:none;border-top:1px solid var(--line-soft)}.card__spec:before{left:0;top:-1px;width:100%;height:1px;background:linear-gradient(to right,transparent,var(--blue),transparent);transform:scaleX(0);transform-origin:left center}.card:hover .card__spec:before,.card:focus-within .card__spec:before{transform:scaleX(1)}.code{height:clamp(40px,7.4vh,58px);font-size:10px}.foot{gap:12px}.mark--tl,.mark--tr{top:22px}.mark--bl,.mark--br{bottom:22px}.mark--tl,.mark--bl{left:22px}.mark--tr,.mark--br{right:22px}}@media(max-height:720px){:root{--pad-y: clamp(20px, 3vw, 34px)}.name{font-size:clamp(1.9rem,4.4vh,2.9rem)}.role{font-size:clamp(1.1rem,2.6vh,1.6rem)}.card__main{gap:clamp(12px,1.8vh,20px)}}@media(max-height:560px){.statement{display:none}.rule{margin-top:12px}.status{top:-15px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.backdrop,.card__frame,.name,.role,.statement,.stack,.foot,.card__spec,.status{opacity:1}.rule{transform:scaleX(1)}.code__line:last-child:after{opacity:1}.card__cut{transform:rotate(45deg) scaleX(1)}.card{transform:none}}
