/* Chapter palette, inset CRT frame, and 0.85 typography revision. No root scaling. */
:root{--chapter-heading:Impact,'Arial Narrow','Microsoft YaHei',sans-serif;--crt-rim:clamp(10px,1.45vw,24px)}
#screen-anchor#screen-anchor{--bg:#202124;--ink:#f4f1eb;--muted:#c2c0bc;--console-header:103px;background:#050505;border-radius:0;box-sizing:border-box;padding:var(--crt-rim)}
#screen-anchor#screen-anchor[data-page=about]{--bg:#2454db;--muted:#e0e6ff}
#screen-anchor#screen-anchor[data-page=contact]{--bg:#d84c48;--muted:#ffdfda}
#screen-anchor#screen-anchor .screen{background:var(--bg);color:var(--ink);border-radius:3% / 6%;overflow:hidden}
#screen-anchor#screen-anchor .screen::before{border-radius:inherit;background:radial-gradient(ellipse at center,transparent 57%,#0004 88%,#0008);box-shadow:inset 0 0 30px #0005}
#screen-anchor#screen-anchor .crt-content{filter:url(#crt-curve)}
#screen-anchor#screen-anchor .topbar{height:var(--console-header);margin:0 1.2%;padding:0 1.2%;border-bottom:1px solid #ffffff28;gap:24px}
#screen-anchor#screen-anchor .brand{font-size:61.965px;color:#fff}
#screen-anchor#screen-anchor .navigation{margin-left:auto;gap:30px}
#screen-anchor#screen-anchor .navigation a{font-size:29.295px;color:inherit}
#screen-anchor#screen-anchor .status{font-size:17.213px;color:var(--muted)}
#screen-anchor#screen-anchor .console-layout{display:block;height:calc(100% - var(--console-header));padding:22px 2.2% 18px;overflow:hidden}
#screen-anchor#screen-anchor .companion{display:none}
#screen-anchor#screen-anchor #main{padding:0;height:100%;overflow-y:auto}
#screen-anchor#screen-anchor #main:has(.home-layout){display:flex;flex-direction:column;min-height:0}
#screen-anchor#screen-anchor .home-layout{display:block;flex:1;width:100%;min-height:0;overflow:auto;padding:0 8px 0 0}
#screen-anchor#screen-anchor .home-left{width:100%;max-width:none}
#screen-anchor#screen-anchor h1,#screen-anchor#screen-anchor h2,#screen-anchor#screen-anchor h3,#module h2,#module h3{font-family:var(--chapter-heading);font-weight:900;font-style:normal;text-shadow:none;letter-spacing:.015em}
#screen-anchor#screen-anchor h1{font-size:clamp(64.8px,7.56vw,113.4px);line-height:1.08;margin:8px 0 18px;text-wrap:initial}
#screen-anchor#screen-anchor h1 em{font-style:normal;font-weight:900;color:inherit}
.headline-en{font-family:Impact,'Arial Narrow',sans-serif;letter-spacing:.015em}
#screen-anchor#screen-anchor .identity{font-size:20.655px;line-height:1.6}
#screen-anchor#screen-anchor .identity-meta{font-size:15.525px;margin:8px 0 15px}
#screen-anchor#screen-anchor .eyebrow{font-size:15.525px;margin-bottom:8px}
#screen-anchor#screen-anchor .section-label{font-size:15.525px;margin-bottom:0;padding-top:8px}
#screen-anchor#screen-anchor .skills{display:block}
#screen-anchor#screen-anchor .skill{display:grid;width:100%;max-width:none;text-align:left;grid-template-columns:54px 1fr 60px;gap:18px;min-height:60px;padding:10px 18px 10px 0;border:0;border-bottom:1px solid #ffffff2e;border-radius:0;background:transparent;color:var(--ink)}
#screen-anchor#screen-anchor .skill strong{font-size:clamp(27.54px,2.768vw,40.5px);font-weight:900;letter-spacing:.02em}
#screen-anchor#screen-anchor .skill-top svg{width:43px;height:43px}
#screen-anchor#screen-anchor .skill .selected-mark{font-size:17.213px}
#screen-anchor#screen-anchor .skill-note{font-size:13.77px;padding-top:10px}
#screen-anchor#screen-anchor .print-dock{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex:0 0 auto;position:relative;margin-top:12px;padding:12px 0 0;gap:24px;background:transparent}
#screen-anchor#screen-anchor .print-choice strong{font-size:18.9px}#screen-anchor#screen-anchor .print-choice small{font-size:13.77px}
#screen-anchor#screen-anchor .start{width:36%;min-height:60px;font-size:24.098px;padding:12px 20px}
#screen-anchor#screen-anchor .dock-object,#screen-anchor#screen-anchor .start-object{width:43px;height:43px}
#screen-anchor#screen-anchor .info-page{max-width:none;font-size:20.655px}
#screen-anchor#screen-anchor .info-page :is(p,li){font-size:20.655px;line-height:1.8;color:var(--ink)}
#screen-anchor#screen-anchor .info-page :is(h2,h3){font-size:31.05px;color:var(--ink)}
#screen-anchor#screen-anchor .info-page :is(.career-date,.fine),#screen-anchor#screen-anchor .contact-row span{color:var(--muted)}
#screen-anchor#screen-anchor .contact-row a{font-size:clamp(27px,3.78vw,54px);font-weight:800;color:#fff}
#screen-anchor#screen-anchor .profile-section,#screen-anchor#screen-anchor .info-grid>section{background:#ffffff08;border:1px solid #ffffff30;border-radius:16px;filter:url(#crt-curve)}
#screen-anchor#screen-anchor .dot-field{opacity:.22}
.signal-grain{opacity:.085;z-index:12;mix-blend-mode:soft-light;animation:signal-grain-shift .18s steps(2,end) infinite}
#module#module{--ink:#252119;--muted:#65512b;--accent:#252119;--spotlight-color:rgba(255,246,207,.24);background:#f0c85b;color:var(--ink);border:0;border-radius:3% / 4%;backdrop-filter:none;isolation:isolate;box-shadow:0 20px 70px #0004;animation:none}
body.showcase-active #module#module{inset:7vh 2vw 7vh auto;width:64vw;height:86vh;animation:none}
#module .module-bar{font-size:17.213px;padding:18px 24px;background:transparent;border-color:#25211938;z-index:4}
#module .close-button{color:var(--ink);font-size:20.655px}
#module #module-body{filter:url(#crt-curve);padding:24px 28px 32px}
#module .module-heading h2{font-size:48.195px;color:var(--ink)}
#module .module-description,#module .detail-copy,#module .detail-copy p,#module .project-facts{font-size:20.655px;color:var(--ink)}
#module .detail-copy h3{font-size:27.54px;color:var(--ink)}
#module :is(.fine,.eyebrow,.project-date,.module-heading>span,.photo-label,.photo-hint,.project-row small){color:var(--muted)}
#module .project-row{color:var(--ink);border-color:#25211938;min-height:75px;padding:17px 10px}
#module .project-row strong{font-size:25.245px;font-weight:800}
#module .project-row:hover{color:#101729}#module .back-link{font-size:18.36px;color:var(--ink)}
#module::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:13;background:repeating-linear-gradient(0deg,#fff1 0 1px,transparent 1px 3px),radial-gradient(ellipse,transparent 55%,#0003);box-shadow:inset 0 0 35px #0002}
#module .photo-placeholder{background:#f3d480;color:var(--ink)}#module .photo-placeholder :is(small,span,em){color:var(--muted)}
/* Central column leads; seven white rows appear only after it reaches the top. */
.chapter-transition{position:fixed;inset:var(--crt-rim);z-index:19;overflow:hidden;border-radius:3% / 6%;pointer-events:auto;isolation:isolate;--chapter-color:#202124}
.chapter-transition.in-module{position:absolute;inset:0;border-radius:inherit;z-index:15}
.chapter-panels{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr)}
.chapter-panels i{background:var(--chapter-color);margin-right:-1px;transform:translateY(102%);animation:chapter-rise 1.16s cubic-bezier(.76,0,.2,1) forwards;animation-delay:.155s}
.chapter-panels i:nth-child(2){animation-delay:0s}.chapter-panels i:nth-child(3){animation-delay:.28s}
@keyframes chapter-rise{to{transform:translateY(0)}}
.chapter-words{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.chapter-words>div{height:15%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%}
.chapter-words b{color:#fff;font-family:Impact,'Arial Narrow','Arial Black',sans-serif;font-weight:900;font-size:clamp(74.25px,13.5vw,216px);letter-spacing:.02em;line-height:.95;opacity:0;transform:translateY(100%);animation:chapter-type .27s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(1.21s + var(--row)*.093s)}
.in-module .chapter-words b{font-size:clamp(56.7px,10.26vw,159.3px)}
@keyframes chapter-type{to{opacity:1;transform:translateY(0)}}
.chapter-wipe{position:absolute;inset:0;background:var(--chapter-color);transform:scaleY(0);transform-origin:top;animation:chapter-cover .70s cubic-bezier(.65,0,.3,1) 2.10s forwards}
@keyframes chapter-cover{to{transform:scaleY(1)}}
.chapter-transition::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#fff1 0 1px,transparent 1px 3px);opacity:.5}
.chapter-transition.reveal-page{opacity:0;transition:opacity .35s ease}
@media(min-width:760px) and (max-height:800px){
 #screen-anchor#screen-anchor{--console-header:81px}
 #screen-anchor#screen-anchor .console-layout{padding-top:12px;padding-bottom:12px}
 #screen-anchor#screen-anchor h1{font-size:70.2px;margin:4px 0 10px}
 #screen-anchor#screen-anchor .identity-meta{margin-bottom:8px}
 #screen-anchor#screen-anchor .skill{min-height:48px;padding-block:6px}
 #screen-anchor#screen-anchor .skill strong{font-size:29.7px}
 #screen-anchor#screen-anchor .start{min-height:50px}
 #screen-anchor#screen-anchor .print-dock{margin-top:6px;padding-top:8px}
}
@media(max-width:759px){
 #screen-anchor#screen-anchor{--console-header:88px}
 #screen-anchor#screen-anchor .topbar{gap:12px;padding-inline:8px}
 #screen-anchor#screen-anchor .brand{font-size:40.5px}
 #screen-anchor#screen-anchor .navigation{gap:12px}
 #screen-anchor#screen-anchor .navigation a{font-size:20.25px;padding-inline:0}
 #screen-anchor#screen-anchor .console-layout{padding:18px 14px;overflow:auto}
 #screen-anchor#screen-anchor #main:has(.home-layout){height:auto;overflow:visible}
 #screen-anchor#screen-anchor .home-layout{flex:none;overflow:visible}
 #screen-anchor#screen-anchor h1{font-size:56.7px}
 #screen-anchor#screen-anchor .skill{min-height:64px}
 #screen-anchor#screen-anchor .skill strong{font-size:29.7px}
 #screen-anchor#screen-anchor .print-dock{flex-direction:column;align-items:stretch;gap:12px}
 #screen-anchor#screen-anchor .start{width:100%}
 #screen-anchor#screen-anchor .info-grid{grid-template-columns:1fr}
 body.showcase-active #module#module{inset:35vh 4vw 3vh;width:92vw;height:62vh}
 #module #module-body{padding:18px}#module .module-heading h2{font-size:37.8px}
 .chapter-words b{font-size:27vw}.in-module .chapter-words b{font-size:22.95vw}
}
:root[data-motion="reduced"]{.chapter-transition{display:none}#screen-anchor#screen-anchor .crt-content{filter:url(#crt-curve)}.signal-grain{animation:none;display:block!important}}



/* Enlarged controls, clean inversion, and a selection-only print action. */
#screen-anchor#screen-anchor .topbar{padding-inline:2%;flex-wrap:nowrap}
#screen-anchor#screen-anchor .status{flex-shrink:0;white-space:nowrap;padding-right:12px}
#screen-anchor#screen-anchor .brand{flex-shrink:0}
#screen-anchor#screen-anchor .skill{min-height:81px;padding-block:13px;transition:none}
#screen-anchor#screen-anchor .skill::before,#module .project-row::before{display:none}
#screen-anchor#screen-anchor .skill:is(:hover,:focus-visible,[aria-pressed=true]),#module .project-row:is(:hover,:focus-visible){background:#fff;color:#000;text-shadow:none;box-shadow:none}
#screen-anchor#screen-anchor .skill:is(:hover,:focus-visible,[aria-pressed=true]) :is(strong,svg,.selected-mark),#module .project-row:is(:hover,:focus-visible) :is(small,span,strong){color:#000}
#screen-anchor#screen-anchor .print-dock{overflow:hidden;padding-bottom:6px;min-height:100px}
#screen-anchor#screen-anchor .start{min-height:81px;padding:16px 27px}
#screen-anchor#screen-anchor .start:disabled{visibility:hidden;pointer-events:none}
#screen-anchor#screen-anchor .start-object svg,#screen-anchor#screen-anchor .dock-object svg{width:43px;height:43px}
#module :is(h2,h3,.project-row strong){letter-spacing:.02em}
#module .module-bar{flex-shrink:0}
#module .project-row{min-height:90px}
#module #module-body{filter:url(#crt-curve);padding:32px 38px 42px}
#module .signal-grain{opacity:.12;mix-blend-mode:screen}
#module .signal-scan{opacity:.32}
#module .module-heading>span{font-size:15px}
#module :is(.photo-label,.photo-hint,.fine,.eyebrow,.project-date){font-size:14px}
#module .chapter-transition{pointer-events:auto}
#screen-anchor#screen-anchor .profile-section,#screen-anchor#screen-anchor .info-grid>section{filter:none}
@media(min-width:760px) and (max-height:800px){
 #screen-anchor#screen-anchor .skill{min-height:65px;padding-block:8px}
 #screen-anchor#screen-anchor .start{min-height:68px}
 #screen-anchor#screen-anchor .print-dock{min-height:82px}
}
@media(max-width:759px){
 #screen-anchor#screen-anchor{--console-header:120px}
 #screen-anchor#screen-anchor .topbar{flex-wrap:wrap;align-content:center;gap:10px 16px}
 #screen-anchor#screen-anchor .navigation{order:3;width:100%;justify-content:space-between;margin:0}
 #screen-anchor#screen-anchor .status{margin-left:auto}
 #screen-anchor#screen-anchor .skill{min-height:86px;gap:10px}
 #screen-anchor#screen-anchor .print-dock{overflow:hidden;min-height:0}
 #module #module-body{padding:24px}
 .chapter-words b{font-size:21vw}.in-module .chapter-words b{font-size:17vw}
}

#module #module-body{filter:url(#crt-curve) url(#crt-tracking)}
:root[data-motion="reduced"]{#module #module-body{filter:url(#crt-curve)}#module .signal-scan{display:none}}

/* The incoming card is assembled by the rising colour columns, not shown underneath. */
#module#module.module-pending{background:transparent;box-shadow:none}
#module.module-pending>:is(.module-bar,#module-body,.signal-grain,.signal-scan){visibility:hidden}
#module.module-pending::before,#module.module-pending::after{opacity:0}
#module .chapter-transition.in-module{filter:none}
:root[data-motion="reduced"]{body.screen-returning #screen-layer::before{animation:none;transform:none}}
/* The return cover reaches outside the viewport; the bezel arrives only during reveal. */
.chapter-transition.return-home{inset:0;border-radius:0}
body.screen-returning #screen-anchor#screen-anchor .screen{border-radius:0;outline:0}
body.screen-returning #screen-anchor#screen-anchor .screen::before{border-radius:0;box-shadow:none}

/* Warm project palette, scoped to the floating module; chapter titles stay white. */
#module .photo-placeholder b{color:var(--ink)}
#module .photo-label span:last-child{color:var(--muted)}
#module .photo-section{border-color:#25211930}
#module .bounce-card{background:#f3d480;border-color:#8d6a30;box-shadow:0 12px 22px #49320b33}
#module .bounce-card:focus-visible{outline-color:#252119}
#module .media-slot{color:#65512b;background:#d9aa4538;border-color:#65512b66}
#module .project-row:is(:hover,:focus-visible){background:#252119;color:#fff3cf}
#module .project-row:is(:hover,:focus-visible) :is(small,span,strong){color:#fff3cf}
#module .close-button:focus-visible,#module .back-link:focus-visible{outline:2px solid #252119;outline-offset:3px}

#module .fine{color:var(--muted)}

/* Quick browse: full-sized targets, not small utility buttons. */
#screen-anchor#screen-anchor .index-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
#screen-anchor#screen-anchor .index-links .browse-field{display:flex;align-items:center;gap:18px;width:100%;min-height:84px;padding:19px 22px;border:1px solid #ffffff70;border-radius:4px;background:#ffffff09;color:#fff;text-align:left;text-shadow:none;transition:background .16s,color .16s,transform .16s}
#screen-anchor#screen-anchor .browse-field strong{flex:1;font:700 clamp(21px,1.8vw,28px)/1.35 'Microsoft YaHei',sans-serif;letter-spacing:.035em}
#screen-anchor#screen-anchor .browse-icon{display:grid;place-items:center;width:34px;flex:0 0 34px}
#screen-anchor#screen-anchor .browse-icon svg{width:32px;height:32px}
#screen-anchor#screen-anchor .browse-arrow{font-size:30px;transition:transform .16s}
#screen-anchor#screen-anchor .browse-field:is(:hover,:focus-visible){background:#fff;color:#163ead;outline:2px solid #fff;outline-offset:3px}
#screen-anchor#screen-anchor .browse-field:is(:hover,:focus-visible) .browse-arrow{transform:translate(3px,-3px)}
#screen-anchor#screen-anchor .browse-field:active{transform:scale(.985)}
#module.quick-browse{animation:quick-browse-enter .24s cubic-bezier(.2,.75,.3,1) both!important}
@keyframes quick-browse-enter{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media(max-width:700px){#screen-anchor#screen-anchor .index-links{grid-template-columns:1fr}#screen-anchor#screen-anchor .index-links .browse-field{min-height:72px;padding:16px 18px}}
:root[data-motion="reduced"]{#module.quick-browse{animation:none!important}#screen-anchor#screen-anchor .browse-field{transition:none}}

/* Keep the operating-screen brand identical to the startup wordmark. */
#screen-anchor#screen-anchor .brand,#screen-anchor#screen-anchor h1 em{font-family:var(--kucoo-face);font-weight:900;font-style:italic;letter-spacing:-.045em}

#screen-anchor#screen-anchor .profile-section:has(.index-links)>.fine{font-size:16px;line-height:1.7;color:#e0e6ff}

/* Date readability: 1.5x previous computed sizes (11px / 14px).
   Font families and heading metrics await the typography review. */
#screen-anchor#screen-anchor .career-row .career-date{font-size:16.5px;line-height:1.6;overflow-wrap:anywhere}
#module .project-date{font-size:21px;line-height:1.6;overflow-wrap:anywhere}
