/* Geometry: Figma 394:3. Paper treatments and motion: xiaoyanghu.com/akool. */
:root { --ink:#0c131b; --muted:#6d7176; --purple:#7f6cf6; --toc-ease:cubic-bezier(.22,1,.36,1); }
body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-synthesis:none; font-family:Inter,"PingFang SC",sans-serif; color:var(--ink); }
button { font:inherit; }
button:focus-visible { outline:2px solid var(--purple); outline-offset:5px; }
h1,h2,p,ul { margin:0; } ul { padding:0; list-style:none; }
.hero { position:relative; width:min(868px,calc(100% - 48px)); margin-left:calc(var(--portfolio-content-left) + 16px); padding-top:182px; padding-bottom:68px; }
.hero-heading { display:flex; flex-direction:column; gap:18px; }
.hero h1 { font-family:"PingFang SC",sans-serif; font-weight:600; font-size:40px; line-height:44px; letter-spacing:-1.6px; }
.role-tags { display:flex; gap:10px; align-items:flex-start; }
.role-tags li { padding:3px 8px; height:30.398px; border:1px solid #7f6cf64d; border-radius:100px; color:var(--purple); font-size:12.845px; line-height:22.4px; white-space:nowrap; }
.hero-projects { display:flex; flex-direction:column; gap:22px; margin-top:18px; }
.blue-showcase { height:300px; width:100%; position:relative; border-radius:24px; overflow:hidden; background:#ccebf6 url("assets/images/blue-grid.png") repeat left top / 208.5px auto; box-shadow:inset 0 0 0 1px #0c131b1a; }
.note-position { position:absolute; display:flex; align-items:center; justify-content:center; }
.note-position-1 { left:9.31px; top:49.78px; width:253.149px; height:214.073px; --angle:-3deg; }
.note-position-2 { left:295.07px; top:54.83px; width:249.818px; height:209.99px; --angle:2deg; }
.note-position-3 { left:585.16px; top:36.75px; width:259.578px; height:222.04px; --angle:-5deg; }
.sticky-note { position:relative; flex:none; width:242.929px; height:201.635px; transform:rotate(var(--angle)); background:rgb(247,238,106); box-shadow:0 .602187px 1.565687px -.666667px #0000001a,0 2.288533px 5.950187px -1.333333px #0000001c,0 10px 26px -2px #00000026; }
.note-content { position:relative; z-index:2; padding:12.13px 0 0 16.16px; font-family:WHBNJZAQ,sans-serif; font-weight:400; }
.note-content h2 { font-weight:400; font-size:30px; line-height:42px; letter-spacing:-.6px; width:220.991px; }
.note-content h2 span { display:block; white-space:nowrap; }
.note-details { margin-top:18px; display:flex; flex-direction:column; gap:10px; font-size:20px; line-height:28.8px; color:#555; }
.note-details p { white-space:nowrap; }
.note-lines { position:absolute; z-index:1; inset:32px; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; overflow:hidden; }
.note-lines i { width:100%; height:3px; flex:none; background:#0000000d; }
.note-fold { position:absolute; left:0; right:0; top:33%; height:138px; transform:translateY(-50%); overflow:hidden; pointer-events:none; z-index:1; }
.fold-two { top:71%; }
.fold-band { position:absolute; top:47%; left:50%; width:571px; transform:translate(-50%,-50%) rotate(-11deg); }
.fold-two .fold-band { width:565px; transform:translate(-50%,-50%) rotate(5deg); }
.fold-band i,.fold-band b { display:block; width:100%; height:30px; box-shadow:inset 0 -20px 8px #0000000d; }
.fold-band b { height:20px; box-shadow:inset 0 20px 8px #ffffff1c; transform:rotate(180deg); }
.strengths { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.strengths li { height:108px; border:1px solid #0c131b1a; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.strengths h2 { font:400 30px/36px WHBNJZAQ,sans-serif; }
.strengths p { font-size:14px; line-height:22.4px; color:var(--muted); }
.toc { position:fixed; z-index:10; top:110px; left:10px; width:243px; }
.back-button { display:block; border:0; padding:0; background:none; cursor:pointer; width:24px; height:24px; margin-left:32px; margin-bottom:24px; transition:transform 220ms var(--toc-ease); }
.back-button img { display:block; width:24px; height:24px; }
.back-button:hover { transform:translateX(-3px); }
.toc-item { border:0; padding:0; background:none; display:flex; align-items:center; width:100%; height:20px; margin-bottom:16px; text-align:left; cursor:pointer; color:var(--muted); font-size:14px; line-height:20px; transition:transform 220ms var(--toc-ease),color 220ms var(--toc-ease); }
.toc-line { width:24px; height:2px; border-radius:1px; flex:none; margin-right:8px; background:var(--ink); opacity:0; transform:scaleX(.25); transform-origin:left; transition:opacity 220ms var(--toc-ease),transform 220ms var(--toc-ease); }
.toc-number { width:22px; flex:none; margin-right:18px; font-variant-numeric:tabular-nums; }
.toc-label { white-space:nowrap; font-family:"PingFang SC",Inter,sans-serif; }
.toc-item.is-active,.toc-item:hover,.toc-item:focus-visible { color:var(--ink); transform:translateX(16px); }
.toc-item.is-active .toc-line { opacity:1; transform:scaleX(1); }
.to-top .toc-label { font-family:Inter,sans-serif; }
@media (max-width:1279.98px) { .hero { margin-left:280px; width:868px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

/* Match the individual text families specified in Figma. */
.strengths li:nth-child(-n+2) p { font-family:"PingFang SC",sans-serif; }

/* Latest Hero 394:3; supplied vector lettering, original paper texture overlays. */
.hero { padding-bottom:53.602px; }
.note-position-1 { left:22.16px; top:48.37px; width:256.403px; height:218.09px; --angle:-4deg; }
.note-position-2 { left:303.16px; top:51.27px; width:246.411px; height:205.844px; --angle:1deg; }
.note-position-3 { left:579.57px; top:41.23px; width:262.675px; height:225.923px; --angle:-6deg; }
.sticky-note { background:#f8f17c; box-shadow:6px 12px 0 #00000014; }
.note-art { display:block; width:100%; height:100%; }
.note-lines,.note-fold { z-index:3; }