.work-collection{
 --collection-bg:#fff;--collection-text:#161719;--collection-muted:#63666a;--collection-rule:#dcdde0;
 background:var(--collection-bg);color:var(--collection-text);padding-top:clamp(22px,4vw,52px);
}
.work-collection{position:relative;isolation:isolate}
.collection-switch{
 position:sticky;top:var(--toolbar-offset,0px);z-index:5;transition:top .18s ease-out;
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,28px);
 border-bottom:1px solid var(--collection-rule);background:var(--collection-bg);
}
.collection-switch button{
 position:relative;appearance:none;display:flex;align-items:baseline;justify-content:center;gap:.28em;border:0;background:transparent;
 color:var(--collection-muted);padding:15px 4px 17px;font:500 clamp(16px,2vw,29px)/1.35 var(--mono);white-space:nowrap;
}
.collection-switch button[aria-selected="true"]{color:var(--collection-text);font-weight:700}
.collection-switch button[aria-selected="true"]::after{
 content:'';position:absolute;inset:auto 0 -1px;height:2px;background:currentColor;
}
.code-bracket{font-size:.76em;font-weight:400;color:var(--collection-muted)}
.collection-switch button[aria-selected="true"] .code-bracket{color:var(--collection-text)}
.collection-switch button:is(:hover,:focus-visible){color:var(--collection-text)}
.collection-code-wave{position:absolute;z-index:6;inset:0 0 auto;width:100%;pointer-events:none}
.official-site-cover{display:block;background:#101427}
.official-site-cover img{display:block;width:100%;height:100%;object-fit:cover}
.work-collection [role="tabpanel"][hidden]{display:none}
.work-collection :is(.topic,.screen,.unit,.category-heading,#project-creator-account){scroll-margin-top:76px}
.work-collection{--category-gap:clamp(20px,2vw,28px);--collection-entry-space:clamp(28px,3.2vw,44px)}
.category-heading{
 display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);margin:0;
 font:650 clamp(24px,2.25vw,34px)/1.3 var(--display);letter-spacing:-.035em;color:var(--ink);
}
.category-heading .index-no,#category-nav .index-no{
 padding:0;color:#656b72;font:500 clamp(10px,.85vw,12px)/1 var(--mono);
 font-variant-numeric:tabular-nums;letter-spacing:0;
}
.category-heading + :is(.unit-grid,.personal-tools-grid,.account-grid){margin-top:var(--category-gap)}
#citic-work .directory{padding-block:clamp(12px,1.7vw,24px) clamp(18px,2.3vw,33px)}
#category-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px clamp(10px,2vw,28px)}
#category-nav a{
 display:flex;align-items:baseline;gap:clamp(7px,1.1vw,16px);
 min-width:0;margin:0;padding:10px 0;border:0;background:none;color:#60646b;text-decoration:none;
}
#category-nav a:is(:hover,:focus-visible,[aria-current]){background:none;color:var(--ink)}
#category-nav a[aria-current] .category-name{font-weight:700}
#category-nav a[aria-current] .index-no{color:var(--ink)}
#category-nav .category-name{font:550 clamp(16px,1.45vw,21px)/1.35 var(--display);letter-spacing:-.025em}
#category-nav .category-arrow{font:500 13px/1 var(--mono);margin-left:2px}
.work-collection .screen .section-top{margin-bottom:var(--category-gap)}
#citic-work #systems{border-top:0;padding-top:var(--collection-entry-space)}
#citic-work #systems::before,#citic-work #systems::after{content:none}
#lab>.personal-work{border-top:0;padding-top:var(--collection-entry-space)}
#personal-gallery>section+section{margin-top:clamp(40px,5vw,72px)}
@media(min-width:761px){.personal-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1150px){.personal-tools-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
:is(#project-plane,#project-courtside) .tool-card-icon{object-fit:cover}
#lab>.personal-work::before,#lab>.personal-work::after{display:none}

.work-collection[data-scope="personal"],#lab,body:has(.work-collection[data-scope="personal"]) footer,
body.personal-detail{
 --collection-bg:#101113;--collection-text:#f1f1f3;--collection-muted:#a8abb1;--collection-rule:#414349;
 --bg:#101113;--ink:#f1f1f3;--muted:#b6b9c0;--subtle:#a6aab2;--line:#373a41;--soft:#202228;
 background:var(--bg);color:var(--ink);color-scheme:dark;
}
body:has(.work-collection[data-scope="personal"]){background:#101113}
.profile-region{background:#fff}
#lab :is(.personal-tool,.account-card){background:#17191d;border-color:var(--line);color:var(--ink)}
#lab :is(.personal-tool,.account-card):hover{background:#202227;border-color:#7c8088}
#lab :is(.tool-title,.account-info strong,.account-open){color:var(--ink)}
#lab :is(.tool-status,.tool-role,.tool-arrow,.account-platform,.account-id,.account-audience,.tool-intro){color:var(--muted)}
#lab .account-bottom{border-color:var(--line)}
#lab :is(.code-cover,.system-demo){color-scheme:light;color:#191b1f;--ink:#151619;--line:#d8dbe0;--soft:#f3f4f6;--bg:white;--muted:#676b74}
body.personal-detail .site-toolbar,body.personal-detail .system-demo{color-scheme:light;--ink:#181a1e;--line:#dbdde0;color:#181a1e}
body.personal-detail .project-title :is(h1,p),body.personal-detail .work-content h2{color:var(--ink)}
body.personal-detail :is(.project-description p,.work-content p,.work-content li){color:var(--muted)}
body.personal-detail .experience-sheet{color:#201f22;--ink:#17181a;color-scheme:light}
@media(max-width:760px){
 .collection-switch button{padding-block:13px 14px}
 #category-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(prefers-reduced-motion:reduce){.collection-switch{transition:none}}

/* Both real panels share a position during the wave. The same radius paints
   the tab bar, cuts the incoming panel and drives the leading code characters. */
.collection-pages{display:grid;position:relative;isolation:isolate}
.collection-pages>[role="tabpanel"]{grid-area:1/1;min-width:0}
#citic-work{--ink:#101114;--bg:#fff;--muted:#66676e;--line:#e6e7eb;--soft:#f5f5f7;--subtle:#85868d;background:var(--bg);color:var(--ink);color-scheme:light}
.work-collection.is-revealing{
 background:radial-gradient(circle at var(--wave-x) var(--wave-y),var(--collection-bg) var(--wave-radius),var(--wave-from) var(--wave-radius));
}
.is-revealing .wave-incoming{z-index:1;clip-path:circle(var(--wave-radius) at var(--wave-x) var(--wave-page-y))}
.is-revealing .collection-switch{
 background:radial-gradient(circle at var(--wave-tab-x) var(--wave-tab-y),var(--collection-bg) var(--wave-radius),var(--wave-from) var(--wave-radius));
}
.is-revealing .collection-switch button{mix-blend-mode:difference;color:#bbb}
.is-revealing .collection-switch button[aria-selected="true"]{color:#fff}
.is-revealing .collection-switch .code-bracket{color:inherit}

.catalogue-card{position:relative;isolation:isolate}
.catalogue-card .unit-index{display:inline-block;vertical-align:.12em;font:500 clamp(11px,.85vw,13px)/1.2 var(--mono);letter-spacing:0;color:var(--muted);margin-right:.12em;white-space:nowrap}
.catalogue-card .card-case-link::after{content:"";position:absolute;inset:0;z-index:2}
.catalogue-card .case-actions :is(a,button):not(.card-case-link){position:relative;z-index:3}
.catalogue-card .card-case-link:focus-visible::after{outline:2px solid currentColor;outline-offset:4px;pointer-events:none}
.catalogue-card .unit-bottom{justify-content:flex-start}
.catalogue-card .case-actions a::before{content:none}
.catalogue-card .case-actions{align-items:baseline;gap:12px 20px}
.catalogue-card .case-actions :is(a,button){font:500 12px/1.55 var(--body)}
.catalogue-card .case-actions .card-case-link{font-weight:650}
.catalogue-card .unit-body p{margin:9px 0 0}
.catalogue-card.personal-tool{border:1px solid var(--line);padding:clamp(15px,2vw,24px)}
.tool-card-icon{width:60px;height:60px;object-fit:contain;border-radius:12px}
.catalogue-card .opportunity-cover img{height:100%;object-fit:cover;object-position:top}

#rail{--reel-height:min(46vw,clamp(178px,24vw,360px))}
.rail .reel-film{flex:none;width:calc(var(--reel-height) * 16 / 9)}
.rail .reel-portrait{width:calc(var(--reel-height) * 9 / 16)}
.reel-link{display:block;user-select:none;color:inherit}
.reel-link .work-thumb{height:var(--reel-height);aspect-ratio:auto}
.reel-link h4{margin:12px 0 0;font:650 clamp(16px,1.28vw,19px)/1.45 var(--display)}
.reel-link p{margin:3px 0 0;color:var(--muted);font:400 13px/1.5 var(--body)}
.reel-link :is(h4,p){overflow-wrap:anywhere}
.reel-portrait .reel-link h4{font-size:clamp(14px,1.1vw,16px)}
.reel-link:hover h4,.reel-link:focus-visible h4{text-decoration:underline;text-underline-offset:3px}
.publishing-showcase{
 display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);
 align-items:start;gap:clamp(20px,3vw,44px);margin-top:var(--category-gap)
}
.publishing-stage-view{display:grid;min-width:0}
.publishing-stage-view>.unit{grid-area:1/1;align-self:start}
.publishing-stage-view>.unit[inert]{visibility:hidden}
.publishing-stage-view .case-visual{aspect-ratio:16/9}
.publishing-stage-view .unit-body h4{margin:0;font:650 clamp(21px,2.05vw,30px)/1.35 var(--display);letter-spacing:-.025em}
.publishing-more{display:grid;gap:8px}
.publishing-pick{
 display:grid;grid-template-columns:minmax(68px,39%) minmax(0,1fr);gap:clamp(8px,1.2vw,16px);align-items:center;
 padding:6px;text-align:left;border:1px solid transparent;border-radius:3px;background:#fff;
 color:var(--muted);font:550 clamp(12px,1.1vw,16px)/1.45 var(--body)
}
.publishing-pick[aria-pressed="true"]{border-color:#27282a;color:var(--ink);font-weight:650}
.publishing-pick:not([aria-pressed="true"]):hover{border-color:var(--line);color:var(--ink)}
.publishing-pick .case-visual{aspect-ratio:16/9}
.publishing-tools{justify-content:flex-end;margin-top:12px}
@media(prefers-reduced-motion:no-preference){
 .publishing-stage-view>.unit:not([inert]){animation:publishing-enter .24s ease-out both}
}
@keyframes publishing-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:760px){
 .publishing-showcase{grid-template-columns:1fr}
 .publishing-more{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.reading-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:var(--category-gap)}
.reading-product{display:flex;align-items:center;gap:clamp(15px,2vw,26px);padding:clamp(16px,2.3vw,32px);border:1px solid var(--line)}
.reading-product img{width:clamp(54px,5vw,72px);height:auto;border-radius:16px;flex:none}
.reading-product h4{margin:0 0 6px;font:650 clamp(18px,1.65vw,24px)/1.3 var(--display)}
.reading-product p{margin:0;color:var(--muted);font:400 14px/1.75 var(--body)}
@media(max-width:760px){.reading-products{grid-template-columns:1fr;gap:12px}}

/* Two creative projects occupy the full row. */
@media(min-width:761px){#personal-gallery section[aria-labelledby="personal-works"]>.unit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Personal collection: explicit ranking, a rotating crown, and a quiet moving edge. */
@property --personal-edge-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.catalogue-card.ranked-personal{position:relative;isolation:isolate}
.catalogue-card.ranked-personal .unit-index{display:none}
.personal-rank{position:absolute;top:20px;right:22px;z-index:3;pointer-events:none;color:#a9acb3;font:500 36px/1 var(--mono);letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.personal-rank-first{top:15px;right:18px;width:64px;height:56px;perspective:240px;color:#f0f1f4}
.rank-crown{display:block;width:64px;height:56px;overflow:visible;fill:#ffffff12;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 55%;filter:drop-shadow(0 3px 8px #ffffff18)}
.rank-crown circle{fill:currentColor;stroke:none}
.personal-card-edge{position:absolute;inset:-1px;z-index:1;padding:1px;pointer-events:none;border-radius:inherit;background:conic-gradient(from var(--personal-edge-angle),transparent 0deg,#ffffff08 180deg,#ffffff70 240deg,transparent 300deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ranked-first .personal-card-edge{background:conic-gradient(from var(--personal-edge-angle),#ffffff05 0deg,#ffffff12 170deg,#ffffffb0 245deg,#ffffff05 310deg)}
.ranked-personal:not(.personal-tool) .personal-rank{top:14px;right:14px;min-width:46px;padding:8px;text-align:center;background:#111b;backdrop-filter:blur(8px);color:#fff;font-size:26px}
@media(prefers-reduced-motion:no-preference){
 .rank-crown{animation:personal-crown-turn 7s ease-in-out infinite}
 .personal-card-edge{animation:personal-edge-orbit 9s linear infinite}
 .ranked-personal:nth-child(2n) .personal-card-edge{animation-duration:11s;animation-delay:-4s}
 .ranked-personal:nth-child(3n) .personal-card-edge{animation-duration:13s;animation-delay:-7s}
}
@keyframes personal-crown-turn{0%,18%{transform:rotateY(-14deg) rotateZ(-5deg)}60%,100%{transform:rotateY(346deg) rotateZ(-5deg)}}
@keyframes personal-edge-orbit{to{--personal-edge-angle:360deg}}
@media(max-width:760px){.personal-rank{font-size:30px;right:18px;top:18px}.personal-rank-first{top:10px;right:12px}}

/* Three creative tools, with two columns retained on smaller screens. */
@media(min-width:1100px){#personal-gallery section[aria-labelledby="personal-works"]>.unit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}