/* Reference proportions: a broad 68vw desktop stage, 3:2 cover, 4:5 on phones. */
/* Image cursors render in the browser top layer, including dialog backdrops. */
html:has(#flow-dialog[open]) #cursor{display:none!important}
@media(hover:hover) and (pointer:fine){
 html #flow-dialog[open],html #flow-dialog[open] *,html #flow-dialog::backdrop{cursor:url('cursor-dot.svg') 16 16,auto!important}
 html #flow-dialog[open] button,html #flow-dialog[open] button *,html #flow-dialog[open] a,html #flow-dialog[open] summary{cursor:url('cursor-action.svg') 24 24,pointer!important}
 html #flow-dialog[open] button:disabled,html #flow-dialog[open] input,html #flow-dialog[open] textarea{cursor:auto!important}
}
#personal.wrap{max-width:1600px;padding:40px 64px 64px;scroll-margin-top:0}
#personal .personal-section-head{width:100%;max-width:none;margin:0 auto 28px;padding-top:24px;align-items:end}
#personal .personal-section-head .eyebrow{font-size:10px;margin-bottom:8px}
#personal .personal-section-head .section-title{font-size:clamp(30px,2.5vw,40px)}
#personal .personal-section-head>p{font-size:13px;line-height:1.7;max-width:340px}
#personal #carousel{width:min(100%,68vw,1280px);max-width:none;margin-inline:auto;--frame-half:33.333cqw}
#personal #personal-panel{width:100%;height:auto;aspect-ratio:3/2;border-radius:16px}
#personal #carousel .carousel-prev,#personal #carousel .carousel-next{top:calc(var(--frame-half) - 22px);width:44px;height:44px;font-size:21px}
#personal #carousel .carousel-prev{left:-62px}
#personal #carousel .carousel-next{right:-62px}
#personal #carousel .carousel-tabs{margin-top:12px}
#personal .carousel-tabs button{font-size:13px;padding:14px 16px;min-height:44px}
#personal .personal-project-detail{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px;padding-top:14px}
#personal .personal-project-detail>div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 10px}
#personal .personal-project-detail .eyebrow{grid-column:1/-1;font-size:9px;letter-spacing:.07em}
#personal .personal-project-detail h3{grid-column:1;grid-row:2;margin:0;font-size:20px;white-space:nowrap}
#personal .personal-project-detail .pill{grid-column:2;grid-row:2;justify-self:end;margin:0;padding:6px 10px;min-height:36px;font-size:10px;white-space:nowrap}
#personal .personal-project-detail .personal-role{grid-column:1/-1;grid-row:3;font-size:12px;line-height:1.65}
#personal .personal-project-detail .personal-summary{font-size:13px;line-height:1.8}
@media(min-width:640px) and (max-width:1023px){
 #personal #carousel{width:100%}
 #personal.wrap{padding-inline:64px}
 #personal #carousel .carousel-prev{left:-54px}
 #personal #carousel .carousel-next{right:-54px}
}
@media(max-width:639px){
 #personal.wrap{padding:32px 20px 40px}
 #personal .personal-section-head{padding-top:12px;margin-bottom:16px;display:flex;align-items:center}
 #personal .personal-section-head>p{max-width:46%;font-size:12px;line-height:1.6;margin:0}
 #personal .personal-section-head .section-title{font-size:27px}
 #personal .personal-section-head .eyebrow{font-size:8px}
  #personal #carousel{width:100%;--frame-half:62.5cqw}
 #personal #personal-panel{aspect-ratio:4/5;height:auto;border-radius:14px}
 #personal #carousel .carousel-prev,#personal #carousel .carousel-next{top:calc(125cqw + 10px)}
 #personal #carousel .carousel-prev{left:0}
 #personal #carousel .carousel-next{right:0}
 #personal #carousel .carousel-tabs{margin:10px 52px 0}
 #personal .carousel-tabs button{font-size:11px;padding:12px 6px;text-align:center}
 #personal .personal-project-detail{grid-template-columns:1fr;gap:10px;padding-top:14px}
 #personal .personal-project-detail>div{grid-template-columns:auto 1fr}
 #personal .personal-project-detail .personal-summary{font-size:12px;line-height:1.7}
 #personal .personal-project-detail .pill{min-height:40px}
 /* A dedicated compact composition keeps every phone clear of the title. */
 .ensemble-gallery .ensemble-phone-slot{left:calc(50% - 10cqw);top:32.45cqw;width:20cqw}
 .ensemble-gallery .phone-home{--dx:-32cqw;--dy:0cqw}
 .ensemble-gallery .phone-wardrobe{--dx:0cqw;--dy:0cqw}
 .ensemble-gallery .phone-outfits{--dx:32cqw;--dy:0cqw}
 .ensemble-gallery .phone-saved{--dx:-16cqw;--dy:44cqw}
 .ensemble-gallery .phone-inspiration{--dx:16cqw;--dy:44cqw}
 .artroom-cover .artroom-world{top:31%;height:62.5cqw}
 .artroom-cover{background:#e5e1ea url('huajian-studio-scene-v2.png') 52% top / auto 112% no-repeat}
 .artroom-cover .artroom-scene{opacity:0}
 .artroom-cover .artroom-cover-heading{top:8%}
 .artroom-cover .artroom-cover-footer{bottom:5%}
}
@media(max-width:359px){#personal.wrap{padding-inline:16px}#personal .personal-section-head>p{font-size:11px}#personal .personal-section-head .section-title{font-size:24px}}

/* Public ICP registration: keep readable and wrap on narrow screens. */
#contact .bottom{flex-wrap:wrap;align-items:center;column-gap:24px;row-gap:16px}
#contact .icp-filing{letter-spacing:.02em;line-height:1.6;white-space:nowrap}
#contact .icp-filing:hover{color:var(--text,#f4f4f5)}
#contact .icp-filing:focus-visible{outline:2px solid currentColor;outline-offset:5px;border-radius:2px}
@media(max-width:600px){#contact .bottom .icp-filing{order:3;flex-basis:100%;font-size:12px}}