html:has(.personal-home){scroll-behavior:smooth;scroll-padding-top:24px;background:#111314}
body.personal-home{background:#111314;color:#edeff0;font-family:"Segoe UI","Microsoft YaHei",sans-serif;line-height:1.6;letter-spacing:0}
.personal-home *, .personal-home *:before, .personal-home *:after{letter-spacing:0}
.personal-home .page-width{width:min(1120px,calc(100% - 80px));margin-inline:auto}
body.personal-home:has(.room-view) header{height:76px;padding-inline:max(40px,calc((100% - 1120px)/2));background:#111314;border-bottom:1px solid #ffffff12;gap:24px}
.personal-home .brand{font-size:24px;font-weight:650}.brand-dot{color:#c8e4a0}
.personal-home .edition{font-size:10px;color:#858d91}
.personal-home .main-nav{gap:28px;align-items:center}.personal-home .main-nav a,.personal-home .main-nav button{font-size:13px;text-decoration:none;color:#c2c7ca;transition:color .18s}
.personal-home .main-nav a:hover,.personal-home .main-nav button:hover{color:#e1efbe}
.personal-home .icon-button{width:34px;height:34px;background:transparent;border-color:#ffffff22}
.personal-home .introduction{padding-block:28px 26px}
.intro-meta{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:11px;color:#98a1a5}
.intro-meta>span:first-child{color:#c8e4a0}.personal-note{color:#a8adb0}
.personal-home .introduction h1{font-size:46px;line-height:1.2;margin:12px 0 9px;font-weight:600}
.personal-home .introduction p{font-size:15px;margin:0;color:#aab1b5;max-width:650px;line-height:1.8}
.home-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:40px;align-items:start}
.home-grid>*{min-width:0}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px;font-size:11px;color:#939da2;min-height:22px}
.section-index{font-size:10px;color:#929a9f;white-space:nowrap}.section-heading h2{font-size:20px;line-height:1.4;margin:0;color:#e8ebed;font-weight:500}
body.personal-home .room-view,body.personal-home .room-view[data-room="3"]{height:auto;min-height:0;padding:0;background:#111314}
body.personal-home .room-view .stage,body.personal-home .room-view[data-room="3"] .stage{width:100%;max-width:720px;min-width:0}
body.personal-home .room-view[data-room="3"] .stage{aspect-ratio:16/9}
.personal-home .room-view[data-room="3"] .room-caption{display:none}
.personal-home .room-view[data-room="3"] .stage:after{border-color:#ffffff22;box-shadow:inset 0 0 0 2px #111314c9,inset 0 0 0 3px #d1dddf15}
.personal-home .room-view[data-room="3"] .stage:before{background:radial-gradient(ellipse at 52% 43%,transparent 42%,#05080914 70%,#03060870 100%);box-shadow:none}
.personal-home .room-view[data-room="3"] .pin{width:18px;height:18px}.personal-home .room-view[data-room="3"] .pin:after{width:4px;height:4px}
.study-caption{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-top:15px}
.study-caption h2{font-size:19px;font-weight:500;margin:0 0 6px}.study-caption p{font-size:12px;color:#a4adb2;margin:0;line-height:1.9;max-width:520px}
.quiet-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;background:none;transition:background .18s}
.quiet-icon img{width:18px;height:18px}.quiet-icon:hover{background:#ffffff0a}
.current-focus{border-left:1px solid #ffffff17;padding-left:28px}
.current-focus .section-heading{margin-bottom:16px}.focus-status{font-size:10px;color:#c8e4a0}
.current-focus h2{font-size:21px;font-weight:500;margin:0 0 12px}
.focus-row{display:flex;gap:12px;width:100%;padding:16px 0;background:none;text-align:left;border-bottom:1px solid #ffffff12;align-items:flex-start}
.focus-number{font-size:10px;color:#859087;padding-top:3px;flex:none}.focus-row>span:nth-child(2){min-width:0;flex:1}
.focus-row strong{font-size:13px;font-weight:500;display:block}.focus-row small{font-size:12px;display:block;line-height:1.9;color:#939ea5;margin-top:7px}
.focus-row>img{width:14px;height:14px;margin-top:4px;opacity:.5}.focus-row:hover strong{color:#d8e8ba}.focus-row:hover>img{opacity:1}
.focus-footnote{font-size:11px;color:#8f989e;line-height:1.9;margin:16px 0 0}
.practice-section{padding-top:38px}.practice-section .section-heading{margin-bottom:18px}
.project-list{border-top:1px solid #ffffff24}
.project-row{width:100%;display:grid;grid-template-columns:44px minmax(170px,1fr) minmax(240px,1.35fr) 24px;gap:24px;align-items:center;background:none;text-align:left;padding:23px 0;border-bottom:1px solid #ffffff18;transition:background .18s}
.project-row:hover{background:#ffffff03}.project-symbol{width:44px;height:44px;display:grid;place-items:center;border-radius:4px}
.project-symbol img{width:22px;height:22px}.symbol-green{background:#273427}.symbol-pink{background:#392d36}
.project-title{font-size:16px;font-weight:500;line-height:1.5}.project-title small{display:block;font-size:11px;color:#939ca3;font-weight:400;margin-top:5px}
.project-description{color:#a3adb4;font-size:13px;line-height:1.9}.project-arrow{width:18px;height:18px;opacity:.55}.project-row:hover .project-arrow{opacity:1}.project-row:hover .project-title{color:#d8e8ba}
.exploration-section{padding-block:42px 30px}.exploration-section .section-heading{margin-bottom:20px}
.exploration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.exploration-grid>button{background:none;border-top:1px solid #ffffff24;padding:20px 0 0;text-align:left;display:flex;flex-direction:column;align-items:stretch}
.topic-type{font-size:10px;color:#b3b9a1}.exploration-grid h3{font-size:16px;font-weight:500;line-height:1.6;margin:12px 0 8px;overflow-wrap:anywhere}
.exploration-grid p{color:#949fa6;font-size:12px;line-height:1.9;margin:0 0 20px;flex:1}.topic-link{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#8c969f}
.topic-link img{width:16px;height:16px;opacity:.6}.exploration-grid button:hover h3{color:#d8e8ba}
.home-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ffffff18;padding-block:24px 34px;font-size:11px;color:#899297}
body.personal-home .concept-archive{background:#111314;border-top:1px solid #ffffff0b}
.personal-home .concept-archive summary{padding:16px max(40px,calc((100% - 1120px)/2));font-size:10px;color:#838c92}
body.personal-home .mobile-entrances{display:none}
.personal-home .tooltip{background:#191d20f5;border-color:#ffffff30;backdrop-filter:none}
.personal-home .tooltip .tag{color:#c6d4b1}.personal-home dialog{background:#181c1f;border-color:#ffffff29}.personal-home .dialog-body p{color:#bdc6cc}
.personal-home .detail-row span:last-child{color:#a5b2ba}
.personal-home #page-title{font-size:26px;line-height:1.5;font-weight:500;margin:0 0 20px}
@media(max-width:1000px){.personal-home .page-width{width:calc(100% - 56px)}body.personal-home:has(.room-view) header{padding-inline:28px}.home-grid{gap:26px;grid-template-columns:minmax(0,1.8fr) minmax(225px,1fr)}.current-focus{padding-left:20px}.current-focus .section-heading{gap:8px}.project-row{gap:20px;grid-template-columns:40px minmax(155px,1fr) minmax(220px,1.25fr) 20px}}
@media(max-width:900px){.home-grid{grid-template-columns:minmax(0,1fr)}.current-focus{border-left:0;padding-left:0;padding-top:22px;border-top:1px solid #ffffff18;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px}.current-focus .section-heading,.current-focus h2,.focus-footnote{grid-column:1/-1}.current-focus .section-heading{margin-bottom:8px}.current-focus h2{font-size:18px;margin-bottom:0}.focus-row{border-bottom:0;padding-bottom:0}.focus-footnote{margin-top:18px}.project-row{grid-template-columns:40px minmax(0,1fr) 18px}.project-description{grid-column:2;grid-row:2}.project-arrow{grid-column:3;grid-row:1}.project-row{row-gap:6px}.personal-home .room-view{max-width:720px;margin-inline:auto}.exploration-grid{gap:20px}}
@media(max-width:600px){.personal-home .page-width{width:calc(100% - 36px)}body.personal-home:has(.room-view) header{padding-inline:18px;height:66px;gap:16px}.personal-home .brand{font-size:22px}.personal-home .edition{display:none}.personal-home .main-nav{gap:18px}.personal-home .main-nav a,.personal-home .main-nav button{font-size:12px}.personal-home .icon-button{width:30px;height:30px}.personal-home .introduction{padding-block:26px 27px}.personal-home .introduction h1{font-size:36px;margin-top:10px}.personal-home .introduction p{font-size:13px;max-width:310px}.intro-meta{font-size:10px}.personal-note{display:none}.section-heading{margin-bottom:12px}.section-index{font-size:9px}.study-caption{padding-top:12px;gap:12px}.study-caption h2{font-size:17px}.study-caption p{font-size:11px}.current-focus{display:block;padding-top:20px}.current-focus .section-heading{margin-bottom:8px}.focus-row{padding:14px 0;border-bottom:1px solid #ffffff12}.focus-row small{margin-top:4px;font-size:12px}.focus-footnote{margin-top:14px}.practice-section{padding-top:30px}.section-heading h2{font-size:18px}.project-row{padding:18px 0;gap:6px 14px;grid-template-columns:36px minmax(0,1fr) 18px}.project-symbol{width:36px;height:36px}.project-symbol img{width:19px;height:19px}.project-title{font-size:15px}.project-description{font-size:12px}.exploration-section{padding-top:32px}.exploration-grid{grid-template-columns:1fr;gap:22px}.exploration-grid>button{padding-top:16px}.exploration-grid h3{margin-top:8px}.exploration-grid p{margin-bottom:12px}.home-footer{padding-block:24px}.personal-home .concept-archive summary{padding-inline:18px}.personal-home .room-view[data-room="3"] .target{width:32px!important;height:32px!important}}
@media(max-width:440px){.personal-home .room-view[data-room="3"]:not(.video-ready) .target[data-key="about"]{top:56%!important}}
@media(prefers-reduced-motion:reduce){html:has(.personal-home){scroll-behavior:auto}}
.demo-intro{font-size:12px;line-height:1.9;color:#a3adb4;margin:0 0 18px}
.personal-home .project-row{grid-template-columns:44px minmax(170px,1fr) minmax(220px,1.35fr) 110px}
.project-info{background:none;text-align:left;padding:0;color:inherit}.project-info:hover{color:#d8e8ba}
.project-row .project-description{margin:0}
.demo-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#d4e5b9;font-size:12px;text-decoration:none;min-height:40px;border-bottom:1px solid #c8e4a040;white-space:nowrap}
.demo-link img{width:15px;height:15px}.demo-link:hover{color:#f0ffd8;border-color:#c8e4a0}
.dialog-actions{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px}.dialog-actions:empty{display:none}
.hotspot-label{position:absolute;left:50%;top:calc(50% + 15px);transform:translateX(-50%);padding:3px 6px;white-space:nowrap;pointer-events:auto;background:#101519e8;border:1px solid #e5eced40;border-radius:3px;font-size:10px;line-height:1.5;color:#eff4f4;text-shadow:none;box-shadow:0 2px 7px #0003}
.label-short{display:none}.target[data-key="about"] .hotspot-label{top:auto;bottom:calc(50% + 15px)}
.target:hover .hotspot-label,.target:focus-visible .hotspot-label{background:#25312b;border-color:#d4e5b9}
@media(max-width:1000px){.personal-home .project-row{grid-template-columns:40px minmax(145px,1fr) minmax(190px,1fr) 100px;gap:16px}}
@media(max-width:900px){.personal-home .project-row{grid-template-columns:40px minmax(0,1fr) 100px;gap:6px 16px}.project-row .demo-link{grid-column:3;grid-row:1/3}.project-row .project-description{grid-column:2;grid-row:2}}
@media(max-width:600px){.label-full{display:none}.label-short{display:inline}.hotspot-label{padding:2px 5px;top:calc(50% + 13px);font-size:10px}.target[data-key="about"] .hotspot-label{bottom:calc(50% + 13px)}.personal-home .project-row{grid-template-columns:36px minmax(0,1fr);gap:8px 14px}.project-row .demo-link{grid-column:2;grid-row:3;justify-self:start;min-height:34px}.demo-intro{font-size:11px}}

/* Mobile playback controls stay outside the image and its navigation labels. */
body.personal-home .room-view{display:flex;flex-direction:column;align-items:stretch}
.personal-home .playback-action{position:static;transform:none;width:100%;box-sizing:border-box;flex-direction:row;flex-wrap:wrap;gap:8px 12px;min-height:44px;margin-top:8px;z-index:auto;text-shadow:none;color:#aab1b5}
.personal-home .playback-action[hidden]{display:none}
.personal-home .playback-action button{width:44px;height:44px;flex:none;border-radius:4px;background:transparent;box-shadow:none;border-color:#ffffff30}
.personal-home .playback-action button img{width:21px;height:21px}
.personal-home .playback-action span,.personal-home .playback-action a{font-size:12px;white-space:normal}
.personal-home .playback-action a{margin-left:auto;padding:8px 0;background:none}
@media(max-width:760px){
  .personal-home .room-view[data-room="3"] .target{width:44px!important;height:44px!important;min-width:44px;min-height:44px}
  .personal-home .room-view[data-room="3"] .label-full{display:none}
  .personal-home .room-view[data-room="3"] .label-short{display:inline}
  .personal-home .room-view[data-room="3"] .hotspot-label{font-size:11px;line-height:1.5;padding:2px 5px;top:calc(50% + 12px)}
  .personal-home .room-view[data-room="3"] .target[data-key="about"] .hotspot-label{top:auto;bottom:calc(50% + 12px)}
}
@media(max-width:360px){
  body.personal-home:has(.room-view) header{gap:10px;padding-inline:14px}
  .personal-home .brand{font-size:20px}
  .personal-home .main-nav{gap:12px}
}