:root{--blue:#245edb;--dark:#003ba8;--panel:#ece9d8;--task:44px;font-family:Tahoma,"Segoe UI",sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:#000;font-size:13px;user-select:none}button,input,textarea{font:inherit}button{cursor:default}.hidden{display:none!important}.screen{position:fixed;inset:0}body::after{content:"";position:fixed;inset:0;z-index:99999;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.22) 0 1px,rgba(255,255,255,.05) 1px 2px,transparent 2px 3px,rgba(0,0,0,.09) 3px 4px);mix-blend-mode:overlay;opacity:.75}
body::before{content:"";position:fixed;inset:0;z-index:99998;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,rgba(255,255,255,.02) 1px 2px,transparent 2px 3px,rgba(0,0,0,.04) 3px 4px);mix-blend-mode:screen;opacity:.65}
html::after{content:"";position:fixed;inset:0;z-index:99997;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.05) 2px 3px,transparent 3px 4px),repeating-linear-gradient(45deg,transparent 0 3px,rgba(255,255,255,.02) 3px 4px,transparent 4px 7px,rgba(0,0,0,.015) 7px 8px),repeating-linear-gradient(-45deg,transparent 0 3px,rgba(255,255,255,.012) 3px 4px,transparent 4px 7px,rgba(0,0,0,.012) 7px 8px);mix-blend-mode:soft-light;opacity:.6}
html::before{content:"";position:fixed;inset:0;z-index:99996;pointer-events:none;background:repeating-conic-gradient(rgba(255,255,255,.01) 0% 25%,transparent 0% 50%) 0 0/4px 4px;mix-blend-mode:overlay;opacity:.5}
.xp-window,.titlebar,.xp-button,.taskbar,.start-menu,.start-button,.start-head,.start-foot,.tray,.task-item,.window-controls button,.context-menu,.toast,.mine-face,.mine-cell,.mines-head,.mines-grid,.tool-button,.side-card,.mine-counter,.play-btn,.ctrl-btn,.volume-slider,.boot-loader,.user-card,.login-footer button,.login-top,.welcome-band,.welcome-user,.shutdown-panel,.power-icon,.desktop-icon,.address-row,.mail-toolbar{image-rendering:pixelated;image-rendering:crisp-edges}
/* Startup and login */
.boot-screen{z-index:1000;color:#fff;background:#000;display:grid;place-items:center;align-content:center}.boot-logo{display:flex;flex-direction:column;align-items:center;gap:30px;transform:translateY(-34px)}.boot-logo .flag{width:120px;height:120px;margin:0 auto}.boot-logo>div:last-child{text-align:center}.boot-logo strong{display:block;font-family:"Franklin Gothic Medium","Arial Black",Arial,sans-serif;font-size:clamp(64px,9vw,108px);font-weight:700;line-height:.88;letter-spacing:-4px}.boot-logo strong span{color:#f17c22;font-size:.48em;font-style:italic;margin-left:8px}.login-brand h1 span{color:#f17c22;font-size:.48em;font-style:italic;margin-left:6px;vertical-align:super;line-height:0}.boot-small{display:block;font-weight:700;letter-spacing:3px;color:#ddd;font-size:14px;margin:0 0 10px}.flag,.mini-flag{width:54px;height:48px;background:url("assets/xp-flag.png") center/contain no-repeat;filter:drop-shadow(0 2px 4px rgba(0,20,60,.3))}.flag i,.mini-flag i{display:none}.boot-loader{position:absolute;top:66%;left:50%;transform:translateX(-50%);width:220px;height:24px;overflow:hidden;border:3px solid #8e8e8e;border-radius:5px;box-shadow:inset 0 1px 3px #000,inset 0 2px 2px #0008,inset 0 0 0 1px #222,inset 0 -1px 0 #555;padding:3px;display:flex;gap:4px}.boot-loader span{width:28px;flex:none;border-radius:1px;background:linear-gradient(180deg,#7ab8ff 0%,#5a9fee 15%,#2868d8 40%,#1a4fb0 55%,#0d3a8e 100%);box-shadow:inset 0 1px 0 #b0d4ff,inset 0 2px 1px #8fc0ff88,inset 0 -1px 0 #0a2a6e,inset 0 -2px 1px #051a4e;animation:bootMove 1.1s linear infinite;transform:translateX(-90px)}.boot-loader span:nth-child(2){animation-delay:.14s}.boot-loader span:nth-child(3){animation-delay:.28s}@keyframes bootMove{to{transform:translateX(240px)}}.boot-screen>p{position:absolute;bottom:28px;color:#aaa;font-size:13px}
.login-screen{z-index:900;color:#fff;background:linear-gradient(#3a5cb5,#5b7fd2 12%,#5b7fd2 88%,#2a4a9a);display:grid;grid-template-rows:10vh 1fr 13vh}.login-top{background:linear-gradient(#001a5a,#001f6e 30%,#003194 60%,#497de0 72%,#96b5f5 73%,#f0a82c 77%,#315bb5 80%);box-shadow:inset 0 1px 0 #5a8aff,inset 0 2px 0 #7daaff88,inset 0 -1px 0 #0005,inset 0 -2px 0 #0002,inset 0 3px 0 #7daaff44}.login-main{min-height:0;display:grid;grid-template-columns:1fr 2px 1fr;align-items:center;gap:clamp(30px,6vw,92px);padding:4vw 10vw;background:radial-gradient(circle at 50% 32%,#7e9fe6,transparent 55%)}.login-divider{height:70%;background:linear-gradient(transparent,#b8ccf3,transparent);box-shadow:2px 0 #4869b3}.login-brand{justify-self:end;text-align:center;text-shadow:1px 2px #3e5ca5}.login-brand .large{width:72px;height:72px;margin:0 auto 20px}.login-brand h1{margin:0;font:700 clamp(38px,6vw,66px)/.9 "Franklin Gothic Medium","Arial Black",Arial,sans-serif;letter-spacing:-3px}.login-brand p{margin:10px 0 0;font-size:18px}.user-card{width:min(420px,42vw);padding:10px;display:grid;grid-template-columns:78px 1fr auto;gap:14px;align-items:center;color:#fff;border:1px solid transparent;border-radius:8px;background:transparent;text-align:left}.user-card:hover,.user-card:focus-visible{outline:0;border-color:#fff;background:linear-gradient(90deg,#204da7aa,#5f83cf22);box-shadow:0 0 0 1px #ffffff66,inset 0 1px 0 #ffffff88,inset 0 2px 1px #ffffff44}.avatar{display:block;width:74px;height:74px;color:transparent;font:0/0 a;background:url("assets/avatar_xingxiang.png") center/cover no-repeat;border:3px solid #fff;border-radius:6px;box-shadow:0 2px 4px #173a85,inset 0 1px 0 #ffffffee,inset 0 2px 1px #ffffffaa,inset 0 -1px 0 #0003,inset 0 -2px 2px #0003,inset 1px 0 #ffffff55,inset -1px 0 #0002}.avatar.small{width:52px;height:52px}.user-card strong{display:block;font-size:21px;text-shadow:1px 2px #29498f}.user-card small{display:block;margin-top:5px;color:#dbe7ff;font-size:14px}.user-card b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(#7de870,#3aa63b 30%,#3aa63b 55%,#2a8a2b);border:2px solid #fff;box-shadow:inset 0 1px 0 #b8ffb0,inset 0 2px 1px #9cf595cc,inset -1px -1px #1a6a1a,inset -2px -2px 2px #185a1855}.login-footer{display:flex;align-items:center;justify-content:space-between;padding:0 8vw;background:linear-gradient(#1a48a5,#163d8e 15%,#163d8e 30%,#122f78);border-top:2px solid #e9a12a;box-shadow:inset 0 1px 0 #2a58b8,inset 0 2px 0 #1a3e88}.login-footer button{color:#fff;background:none;border:0;font-weight:700}.login-footer button span{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:8px;border-radius:6px;background:linear-gradient(#ff7a5e,#e14b36 30%,#e14b36 55%,#b8341f);border:2px solid #fff;box-shadow:inset 0 1px 0 #ffd0c0,inset 0 2px 1px #ffb0a0cc,inset -1px -1px #8a2010,inset -2px -2px 2px #6a180855}.login-footer p{text-align:right;line-height:1.5;color:#dce6ff}
/* Welcome screen */
.welcome-screen{z-index:950;display:grid;grid-template-rows:auto 1fr auto;color:#fff;background:#5b7fd2}.welcome-band{height:9vh;background:linear-gradient(#020a3a,#0a1a5c 30%,#0a1a5c 60%,#0f2b8a)}.welcome-band.bottom{background:linear-gradient(#0f2b8a,#0a1a5c 40%,#0a1a5c 70%,#020a3a)}.welcome-main{display:grid;place-items:center;background:linear-gradient(#3a5de0,#4a6de5 15%,#5b7ef0 40%,#4a6de5 75%,#3a5de0);position:relative;overflow:hidden}.welcome-main:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 1px,transparent 1px 2px,rgba(255,255,255,.05) 2px 3px,transparent 3px 4px),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px);pointer-events:none}.welcome-content{text-align:center;z-index:1}.welcome-title{margin:0 0 36px;font:italic 700 clamp(56px,10vw,120px)/1 "Trebuchet MS","Segoe UI",sans-serif;letter-spacing:6px;text-shadow:2px 3px 6px #0a1a5c66;animation:welcomePulse 2s ease-in-out infinite alternate}.welcome-user{display:inline-flex;align-items:center;gap:18px;padding:16px 28px;border-radius:10px;background:linear-gradient(180deg,#ffffff30,#ffffff12 40%,#ffffff08);backdrop-filter:blur(2px);border:1px solid #ffffff50;box-shadow:0 4px 18px #0a1a5c44,inset 0 1px 0 #ffffff88,inset 0 2px 1px #ffffff44,inset 0 -1px 0 #0003,inset 0 -2px 2px #0002}.welcome-avatar{width:66px;height:66px}.welcome-user-info{text-align:left}.welcome-user-info strong{display:block;font-size:22px;font-weight:700;text-shadow:1px 1px 3px #0a1a5c66}.welcome-user-info small{display:block;margin-top:4px;color:#dbe7ff;font-size:13px}.welcome-loader{display:flex;gap:5px;justify-content:center;margin:34px 0 14px}.welcome-loader span{width:28px;height:14px;border-radius:3px;background:linear-gradient(90deg,#17336f,#527fee,#17336f);animation:welcomeLoad 1.1s linear infinite}.welcome-loader span:nth-child(2){animation-delay:.14s}.welcome-loader span:nth-child(3){animation-delay:.28s}.welcome-hint{margin:0;font-size:14px;color:#dbe7ffaa}@keyframes welcomePulse{from{opacity:.88;text-shadow:2px 3px 6px #0a1a5c66}to{opacity:1;text-shadow:2px 3px 12px #0a1a5c88}}@keyframes welcomeLoad{0%{transform:translateX(-90px) scaleX(.6)}50%{transform:translateX(0) scaleX(1)}100%{transform:translateX(90px) scaleX(.6)}}
/* Desktop */
.desktop{z-index:100;background:#3b82bd url("assets/meadow-wallpaper.png") center/cover no-repeat}.desktop-shine{position:absolute;inset:0 0 var(--task);pointer-events:none;background:radial-gradient(circle at 55% -30%,#fff3,transparent 45%)}.desktop.crt:after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;background:repeating-linear-gradient(0deg,#0002 0 1px,transparent 1px 3px);mix-blend-mode:multiply;animation:flicker .13s infinite alternate}@keyframes flicker{from{opacity:.25}to{opacity:.42}}.desktop-icons{position:absolute;top:18px;left:12px;z-index:2;display:grid;gap:13px}.desktop-icon{width:92px;min-height:84px;padding:4px;color:#fff;background:none;border:1px solid transparent;text-shadow:1px 2px 2px #002d6d}.desktop-icon:hover,.desktop-icon.selected{background:#1753b76e;border-color:#c9ddff99}.desktop-icon .icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 4px;filter:drop-shadow(2px 3px 2px #17365f88)}.desktop-icon .icon.icon-pdf{background:url("assets/icon-pdf.png") center/contain no-repeat;color:transparent;font:0/0 a;border:0;border-radius:0;box-shadow:none;width:80px;height:80px}.desktop-icon .icon.icon-folder{background:url("assets/icon-folder.png") center/contain no-repeat;color:transparent;font:0/0 a;border:0;border-radius:0;box-shadow:none;width:80px;height:80px}.desktop-icon .icon.icon-mail{background:url("assets/icon-mail.png") center/contain no-repeat;color:transparent;font:0/0 a;border:0;border-radius:0;box-shadow:none;width:80px;height:80px}.desktop-icon .icon.icon-user{background:url("assets/icon-user.png") center/contain no-repeat;color:transparent;font:0/0 a;border:0;border-radius:0;box-shadow:none;width:80px;height:80px}.desktop-icon .icon.icon-mines{background:url("assets/icon-mines.png") center/contain no-repeat;color:transparent;font:0/0 a;border:0;border-radius:0;box-shadow:none;width:80px;height:80px}.desktop-icon .icon.icon-player{background:url("assets/icon-player.png") center/contain no-repeat;color:transparent;font:0/0 a;border:0;border-radius:0;box-shadow:none;width:80px;height:80px}.desktop-icon b{display:block;font-size:13px;font-weight:500;line-height:1.2;text-align:center}
/* Window chrome */
.windows-layer{position:absolute;inset:0 0 var(--task);overflow:hidden}.xp-window{position:absolute;z-index:5;width:min(720px,calc(100vw - 32px));min-width:320px;min-height:230px;background:var(--panel);border:3px solid var(--blue);border-top-color:#2f78ff;border-radius:8px 8px 2px 2px;box-shadow:3px 6px 22px #06285566,inset 0 1px 0 #fff,inset 0 2px 0 #ffffffee,inset 0 3px 2px #ffffffdd,inset 0 4px 1px #ffffff88,inset 1px 1px 0 #82b0ff,inset 2px 1px 1px #a5c7ff88,inset 3px 1px 1px #c5dfff44,inset -1px -1px #ffffff88,inset -1px -2px 2px #0003,inset -2px -3px 3px #0002,inset -3px -4px 4px #0001;overflow:hidden}.xp-window.focused{box-shadow:5px 10px 28px #06285588,inset 0 1px 0 #fff,inset 0 2px 0 #ffffffee,inset 0 3px 2px #ffffffdd,inset 0 4px 2px #ffffffaa,inset 0 5px 1px #ffffff44,inset 1px 1px 0 #a5c7ff,inset 2px 1px 1px #c5dfff88,inset 3px 1px 1px #d5e7ff44,inset -1px -1px #ffffffaa,inset -1px -2px 2px #0003,inset -2px -3px 3px #0002,inset -3px -4px 4px #0001}.xp-window.maximized{inset:0!important;width:100%!important;height:100%!important;border-radius:0}.xp-window.minimized{display:none}.titlebar{height:30px;padding:3px 4px 3px 7px;display:flex;justify-content:space-between;align-items:center;color:#fff;background:linear-gradient(#e0f0ff,#cae8ff 4%,#9cddff 6%,#5aaaff 8%,#3d95ff 12%,#1767e8 24%,#1767e8 28%,#0a5ee0 50%,#0755cf 65%,#0755cf 70%,#0844a7);text-shadow:1px 1px #00368e;box-shadow:inset 0 1px 0 #fff,inset 0 2px 0 #ffffffee,inset 0 3px 1px #ffffffcc,inset 0 4px 1px #ffffff44,inset 1px 0 0 #9cddff88,inset -1px 0 0 #00368e44,inset 0 -1px 0 #0006,inset 0 -2px 1px #0003}.xp-window:not(.focused) .titlebar{background:linear-gradient(#dfe8f4,#c5d4e8 8%,#a5b9d7 12%,#a5b9d7 28%,#6c8fc4 65%,#6c8fc4 70%,#557aaa);box-shadow:inset 0 1px 0 #ffffffcc,inset 0 2px 0 #ffffff88,inset 0 -1px 0 #0002}.window-title{display:flex;gap:7px;align-items:center;overflow:hidden;white-space:nowrap}.window-title span{font-size:17px}.window-title b{overflow:hidden;text-overflow:ellipsis}.window-controls{display:flex;gap:2px}.window-controls button{width:24px;height:22px;padding:0;color:#fff;font:bold 16px/16px Arial;background:linear-gradient(#eaf4ff,#cce0ff 8%,#b8d6ff 12%,#85b6ff 15%,#5a9eff 28%,#165bd5 70%,#0e44a8);border:1px solid #fff;border-radius:3px;box-shadow:inset 0 1px 0 #fff,inset 0 2px 1px #ffffffee,inset 1px 1px 0 #ffffffaa,inset 2px 2px 1px #ffffff44,inset -1px -1px #092d8b,inset -1px -2px 1px #06236e,inset -2px -2px 1px #041e5e}.window-controls button[data-win=close]{background:linear-gradient(#fff0e8,#ffdccc 8%,#ffd0bc 12%,#f7a68c 15%,#f08a6e 28%,#d3270a 60%,#a01a05);box-shadow:inset 0 1px 0 #fff,inset 0 2px 1px #fff5ee,inset 1px 1px 0 #ffffffaa,inset 2px 2px 1px #ffffff44,inset -1px -1px #6a1203,inset -1px -2px 1px #4a0c02,inset -2px -2px 1px #2a0601}.window-body{height:calc(100% - 30px);min-height:200px;overflow:auto;color:#1d1d1d;background:var(--panel)}.resize-grip{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 45%,#888 46% 52%,transparent 53% 62%,#888 63% 69%,transparent 70%)}.xp-button{min-width:76px;padding:4px 12px;color:#111;background:linear-gradient(#fff,#fcfaf0 20%,#f7f4ea 35%,#f0ede0 50%,#ece9d8);border:1px solid #174ea6;border-radius:3px;box-shadow:inset 0 1px 0 #fff,inset 0 2px 1px #ffffffee,inset 0 3px 1px #ffffff66,inset 1px 1px 0 #fff,inset 2px 2px 1px #ffffff44,inset -1px -1px #aca899,inset -1px -2px 1px #8a867888,inset -2px -2px 1px #6a685844}.xp-button:active{background:linear-gradient(#d8d4c5,#d0ccbd 50%,#c8c4b5);box-shadow:inset 1px 1px 0 #777,inset 1px 2px 1px #555,inset 2px 2px 2px #44444488,inset -1px -1px #fff,inset -1px -2px 1px #ffffff44}
/* App interiors */
.explorer-toolbar{display:flex;align-items:center;gap:5px;min-height:58px;padding:4px 8px;background:linear-gradient(#fffefe,#fdfdfc 15%,#f5f3ea 30%,#f0eee5 45%,#e8e5d5 60%,#e3dfd1);border-bottom:1px solid #a5a5a5;box-shadow:inset 0 1px 0 #fff,inset 0 2px 0 #ffffffee,inset 0 3px 1px #ffffffcc,inset 0 4px 1px #ffffff44,inset 0 -1px 0 #0001}.tool-button{min-width:54px;padding:3px 7px;border:0;background:transparent}.tool-button:hover{background:#dbe9ff;outline:1px solid #7da2ce}.address-row{display:flex;align-items:center;gap:7px;padding:4px 7px;background:#ece9d8;border-bottom:1px solid #aaa}.address-row input{flex:1;height:24px;padding:2px 6px;border:1px inset #aaa;background:#fff}.about-layout{display:grid;grid-template-columns:185px 1fr;min-height:420px}.xp-sidebar{padding:14px 12px;background:linear-gradient(135deg,#6a91df,#436cb8)}.side-card{margin-bottom:13px;border-radius:7px 7px 3px 3px;overflow:hidden;background:#fff}.side-card h4{margin:0;padding:7px 10px;color:#1c55ad;background:linear-gradient(90deg,#fff,#cad9f6)}.side-card a,.side-card button{display:block;width:100%;padding:5px 10px;color:#184c9b;text-align:left;text-decoration:none;border:0;background:#fff}.side-card a:hover,.side-card button:hover{text-decoration:underline}.about-main{padding:clamp(20px,4vw,44px);background:#fff}.portrait{float:right;display:grid;place-items:center;width:132px;height:156px;margin:0 0 20px 28px;color:transparent;font:0/0 a;background:url("assets/avatar_xingxiang.png") center/cover no-repeat,linear-gradient(145deg,#ffc66c,#8241a5 70%);border:8px solid #fff;box-shadow:0 0 0 1px #aaa,4px 5px 11px #777;transform:rotate(2deg)}.about-main h2{margin:0;color:#174b99;font-size:30px}.about-main .role{color:#777;font-size:16px}.about-main p{font-size:14px;line-height:1.65}.chips{display:flex;gap:7px;flex-wrap:wrap}.chips span{padding:5px 9px;border:1px solid #aac1e6;border-radius:12px;color:#174b99;background:#eef5ff}.resume-view{min-height:470px;padding:26px;background:#777}.paper{width:min(620px,94%);margin:0 auto;padding:42px;background:#fff;box-shadow:0 4px 18px #222;transition:transform .3s ease}.paper h2{margin:0;color:#174b99;font:32px Georgia}.paper h3{margin:24px 0 8px;padding-bottom:4px;color:#164a92;border-bottom:2px solid #164a92;text-transform:uppercase;letter-spacing:1px;font-size:14px}.resume-item{display:grid;grid-template-columns:112px 1fr;gap:15px;margin:13px 0}.resume-item time{color:#777;font-weight:700}.resume-item b{display:block}.resume-item p{margin:5px 0;line-height:1.5}.resume-head{display:flex;align-items:flex-start;gap:20px;margin-bottom:6px;padding-bottom:14px;border-bottom:3px solid #174b99}.resume-photo{flex:none;width:100px;height:134px;object-fit:cover;border:3px solid #fff;box-shadow:0 0 0 1px #aaa,3px 4px 10px #777}.resume-head-info{flex:1;text-align:left}.resume-head-info h2{margin:0 0 6px}.resume-contact{margin:6px 0 0;color:#555;font-size:13px}.resume-skills{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}.skill-group{padding:10px 12px;background:#f4f7fc;border:1px solid #c5d6ef;border-radius:5px}.skill-group b{display:block;color:#174b99;margin-bottom:4px;font-size:13px}.skill-group span{color:#555;font-size:12px;line-height:1.5}.resume-awards{margin:0;padding-left:18px}.resume-awards li{margin:6px 0;color:#333;line-height:1.5}
.projects-view{min-height:470px;background:#fff}.projects-content{display:grid;grid-template-columns:165px 1fr;min-height:390px}.project-nav{padding:16px 10px;background:linear-gradient(#7aa3e8,#436bb8)}.project-nav h3{margin:0 0 12px;color:#fff}.project-nav button{display:block;width:100%;margin-bottom:5px;padding:8px;color:#164a91;text-align:left;background:#fff;border:0;border-radius:3px}.project-nav button.active{color:#fff;background:#174fa5}.project-stage{padding:22px;overflow:visible}.project-hero{display:grid;min-height:190px;place-items:end start;padding:24px;color:#fff;background:linear-gradient(135deg,#10254b,#13799a 54%,#f39a35);box-shadow:inset 0 0 0 1px #fff5}.project-hero.alt-2{background:linear-gradient(135deg,#32154c,#9a3972,#f1bb58)}.project-hero.alt-3{background:linear-gradient(135deg,#081c1a,#176b5c,#83c856)}.project-hero.alt-4{background:linear-gradient(135deg,#1a0a2e,#5b2a8c,#e94f9e)}.project-hero.alt-5{background:linear-gradient(135deg,#2a1503,#8a4b0e,#f0a93a)}.project-hero.alt-6{background:linear-gradient(135deg,#0d1b2a,#1b4965,#5fa8d3)}.project-hero h2{margin:0;font-size:clamp(24px,4vw,46px);letter-spacing:-1px}.project-meta{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}.project-meta span{padding:4px 8px;color:#174b99;background:#e5efff;border:1px solid #b6caeb}.project-stage p{line-height:1.6}.mail-toolbar{padding:7px;border-bottom:1px solid #aaa;background:linear-gradient(#fff,#e8e5d7)}.mail-form{display:grid;grid-template-columns:66px 1fr;align-items:center;gap:7px;padding:10px;background:#f3f1e7}.mail-form input{height:25px;padding:4px;border:1px inset #aaa;background:#fff}.mail-form textarea{grid-column:1/-1;min-height:235px;padding:14px;resize:none;border:1px inset #aaa;background:#fff}.mail-status{grid-column:1/-1;margin:0;color:#35622d}
.paint-ui{height:100%;min-height:430px;display:grid;grid-template-columns:54px 1fr;grid-template-rows:36px 1fr 44px}.paint-menu{grid-column:1/-1;padding:5px 9px;border-bottom:1px solid #888;background:#ece9d8}.paint-tools{padding:5px;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:3px;border-right:1px solid #888}.paint-tools button{width:21px;height:24px;padding:0;border:1px solid #777;background:#eee}.paint-tools button.active{background:#b9cce8;box-shadow:inset 1px 1px #444}.canvas-wrap{overflow:auto;padding:10px;background:#808080}.paint-canvas{display:block;background:#fff;box-shadow:1px 1px #222;touch-action:none}.palette{grid-column:1/-1;display:flex;gap:4px;align-items:center;padding:6px;border-top:1px solid #aaa}.swatch{width:24px;height:24px;border:1px solid #333}.player-ui{height:100%;min-height:560px;display:flex;flex-direction:column;color:#d5e8ff;background:linear-gradient(160deg,#070f1e 0%,#0d1f3a 30%,#0a1a30 60%,#06101f 100%)}.player-top{display:flex;align-items:center;gap:18px;padding:20px;border-bottom:1px solid #1a2f4e;position:relative}.player-top:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,#1a3a6e22,transparent 60%);pointer-events:none}.vinyl-stage{flex:none;width:120px;height:120px;position:relative}.vinyl{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#1c1c1c 26%,#0a0a0a 27%,#1a1a1a 28%,#0a0a0a 29%,#181818 30%,#0a0a0a 31%,#161616 32%,#0a0a0a 33%,#181818 34%,#0a0a0a 35%,#161616 36%,#0a0a0a 37%,#181818 38%,#0a0a0a 39%,#161616 40%,#0a0a0a 41%,#181818 42%,#0a0a0a 43%,#161616 44%,#0a0a0a 45%,#181818 46%,#0a0a0a 47%,#161616 48%,#0a0a0a 49%,#181818 50%,#080808 100%);box-shadow:0 6px 20px #000a,0 0 0 3px #1a1a1a,0 0 0 4px #333,inset 0 0 30px #000;position:relative;transition:transform .4s}.vinyl.spinning{animation:vinylSpin 4s linear infinite}.vinyl-grooves{position:absolute;inset:5px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff06,inset 0 0 0 4px #0000,inset 0 0 0 5px #ffffff04,inset 0 0 0 11px #0000,inset 0 0 0 12px #ffffff03,inset 0 0 0 18px #0000,inset 0 0 0 19px #ffffff03,inset 0 0 0 25px #0000,inset 0 0 0 26px #ffffff02,inset 0 0 0 32px #0000,inset 0 0 0 33px #ffffff02,inset 0 0 0 39px #0000,inset 0 0 0 40px #ffffff02}.vinyl-label{position:absolute;top:50%;left:50%;width:74px;height:74px;border-radius:50%;background:url("assets/cover_qingtian.jpg") center/cover no-repeat,#245edb;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #0a0a0a,0 0 0 3px #3a3a3a,0 0 0 4px #1a1a1a,inset 0 0 0 2px #00000030,inset 0 2px 8px #000a;transition:background-image .3s ease}.vinyl-shine{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.06) 30deg,transparent 60deg,transparent 180deg,rgba(255,255,255,.04) 210deg,transparent 240deg);pointer-events:none}.vinyl-hole{position:absolute;top:50%;left:50%;width:7px;height:7px;border-radius:50%;background:#050505;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #444;z-index:3}@keyframes vinylSpin{to{transform:rotate(360deg)}}.tone-arm{position:absolute;top:-8px;right:-6px;width:70px;height:70px;z-index:5;transform-origin:85% 15%;transform:rotate(-28deg);transition:transform .6s ease}.tone-arm.active{transform:rotate(8deg)}.tone-pivot{position:absolute;top:0;right:0;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#aaa,#555 60%,#333);box-shadow:0 1px 3px #000a,inset 0 1px 0 #ccc}.tone-rod{position:absolute;top:6px;right:6px;width:4px;height:52px;background:linear-gradient(90deg,#777,#bbb,#777);border-radius:2px;transform-origin:top right;transform:rotate(35deg);box-shadow:1px 0 2px #0006}.tone-head{position:absolute;bottom:-4px;left:10px;width:14px;height:10px;background:linear-gradient(135deg,#888,#444);border-radius:2px 2px 4px 4px;box-shadow:0 1px 3px #0008;transform:rotate(35deg)}.player-meta{flex:1;min-width:0;position:relative;z-index:1}.track-info h3{margin:0;font-size:21px;color:#fff;text-shadow:0 1px 6px #0008}.track-info p{margin:4px 0 0;font-size:12px;color:#7fa8d8}.visualizer{display:flex;align-items:end;gap:2px;margin-top:14px;height:48px}.visualizer i{flex:1;height:6%;min-height:3px;border-radius:2px 2px 0 0;background:linear-gradient(#5acaff,#1888dc 70%,#0d5fa8);box-shadow:0 0 4px #32c8ff55;transition:height .07s ease-out}.lyrics-view{flex:1;min-height:220px;overflow-y:auto;padding:30px 24px;scroll-behavior:smooth;mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%)}.lyrics-view::-webkit-scrollbar{width:5px}.lyrics-view::-webkit-scrollbar-track{background:transparent}.lyrics-view::-webkit-scrollbar-thumb{background:#2a4a7a;border-radius:3px}.lyric-line{text-align:center;font-size:14px;line-height:2.6;color:#4a6a92;transition:color .35s,transform .35s,font-size .35s,text-shadow .35s;cursor:default}.lyric-line.active{color:#fff;font-size:17px;font-weight:600;transform:scale(1.05);text-shadow:0 0 16px #3a7fd899,0 0 4px #5acaff55}.playlist-panel{flex:1;min-height:220px;overflow-y:auto;padding:16px 20px}.playlist-panel h4{margin:0 0 12px;font-size:14px;color:#7fa8d8;text-transform:uppercase;letter-spacing:2px}.playlist-panel::-webkit-scrollbar{width:5px}.playlist-panel::-webkit-scrollbar-track{background:transparent}.playlist-panel::-webkit-scrollbar-thumb{background:#2a4a7a;border-radius:3px}.playlist-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .2s;margin-bottom:6px}.playlist-item:hover{background:#15263d}.playlist-item.active{background:linear-gradient(90deg,#1a3a6e,#15263d);box-shadow:inset 3px 0 0 #5acaff}.pl-num{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#7fa8d8;background:#15263d}.playlist-item.active .pl-num{color:#fff;background:#1888dc}.pl-info{flex:1;min-width:0}.pl-info b{display:block;font-size:14px;color:#d5e8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pl-info small{display:block;font-size:11px;color:#5a7a9a;margin-top:2px}.playlist-item.active .pl-info b{color:#fff}.player-progress{display:flex;align-items:center;gap:10px;padding:10px 20px}.player-progress span{min-width:38px;font-size:11px;color:#7fa8d8;text-align:center;font-variant-numeric:tabular-nums}.progress-track{flex:1;height:6px;position:relative;cursor:pointer;border-radius:3px;background:#15263d;user-select:none;-webkit-user-select:none}.progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#0d5fa8,#1888dc,#5acaff);box-shadow:0 0 8px #32c8ff66;transition:width .15s linear}.progress-thumb{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 8px #5acaff,0 0 0 2px #1888dc;transition:left .15s linear,width .15s,height .15s;opacity:0}.progress-track:hover .progress-thumb,.progress-thumb.show{opacity:1}.progress-track.dragging{height:8px}.progress-track.dragging .progress-fill{transition:none}.progress-thumb.dragging{width:16px;height:16px;box-shadow:0 0 14px #5acaff,0 0 0 3px #1888dc;transition:none}.player-controls{display:flex;justify-content:center;align-items:center;padding:10px 0 18px;gap:14px}.ctrl-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:15px;color:#aacbe8;border:1px solid #2a4a6a;background:linear-gradient(#1a2f4e,#0d1f3a);box-shadow:0 2px 6px #0006,inset 0 1px 0 #2a4a6a;cursor:pointer;transition:filter .15s,transform .1s}.ctrl-btn:hover{filter:brightness(1.25)}.ctrl-btn:active{transform:scale(.92)}.play-btn{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:20px;color:#fff;border:2px solid #5a8eff;background:linear-gradient(#3d95ff,#1767e8 50%,#0755cf);box-shadow:0 4px 14px #000a,inset 0 1px 0 #9cddff,inset 0 2px 1px #5a9eff66,inset 0 -2px 2px #0003;cursor:pointer;transition:transform .12s,filter .15s}.play-btn:hover{filter:brightness(1.12)}.play-btn:active{transform:scale(.93)}.play-btn.playing{font-size:16px}.volume-wrap{display:flex;align-items:center;gap:6px;margin-left:8px}.vol-icon{font-size:14px;opacity:.7}.volume-slider{-webkit-appearance:none;appearance:none;width:70px;height:4px;border-radius:2px;background:#1a2f4e;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#5acaff;box-shadow:0 0 4px #32c8ff66;cursor:pointer}.volume-slider::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#5acaff;box-shadow:0 0 4px #32c8ff66;cursor:pointer}.notes-ui{height:100%;min-height:340px;display:grid;grid-template-rows:28px 1fr}.notes-menu{padding:5px 8px;background:#ece9d8;border-bottom:1px solid #aaa}.notes-ui textarea{width:100%;height:100%;padding:10px;resize:none;border:0;outline:0;font:15px/1.5 "Lucida Console",monospace}
.mines-ui{height:100%;min-height:360px;display:flex;flex-direction:column;align-items:center;padding:8px;background:#c0c0c0}.mines-head{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:270px;padding:4px 6px;margin-bottom:8px;background:#c0c0c0;border:2px solid #fff;border-right-color:#808080;border-bottom-color:#808080}.mines-counter{display:flex;align-items:center;justify-content:center;width:56px;height:32px;background:#000;border:1px solid #fff;border-right-color:#808080;border-bottom-color:#808080;font:bold 22px/1 "Courier New",monospace;color:#f00;text-shadow:0 0 4px #f005}.mine-face{width:34px;height:34px;font-size:20px;display:flex;align-items:center;justify-content:center;line-height:1;border:2px solid #fff;border-right-color:#808080;border-bottom-color:#808080;background:#c0c0c0;cursor:pointer}.mine-face:active{border-color:#808080;border-right-color:#fff;border-bottom-color:#fff}.mines-grid{display:grid;grid-template-columns:repeat(9,28px);gap:0;padding:3px;background:#c0c0c0;border:2px solid #808080;border-right-color:#fff;border-bottom-color:#fff}.mine-cell{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font:bold 14px Arial;border:2px solid #fff;border-right-color:#808080;border-bottom-color:#808080;background:#c0c0c0;cursor:pointer;padding:0}.mine-cell:active:not(.revealed){border-color:#808080;border-right-color:#fff;border-bottom-color:#fff}.mine-cell.revealed{border:1px solid #808080;background:#c0c0c0}.mine-cell.mine{background:#f00}.mine-cell.n1{color:#0000ff}.mine-cell.n2{color:#008000}.mine-cell.n3{color:#ff0000}.mine-cell.n4{color:#000080}.mine-cell.n5{color:#800000}.mine-cell.n6{color:#008080}.mine-cell.n7{color:#000}.mine-cell.n8{color:#808080}.mines-hint{margin-top:8px;font-size:12px;color:#444}
/* Start menu and taskbar */
.start-menu{position:absolute;z-index:9000;left:0;bottom:var(--task);width:min(410px,96vw);border:2px solid #1852b7;border-radius:7px 7px 0 0;overflow:hidden;box-shadow:4px -2px 15px #001b5d77,inset 0 1px 0 #6aa8f0,inset 0 2px 0 #88baf866,inset 1px 0 0 #6aa8f055,inset -1px 0 0 #00368e33}.start-head{height:68px;display:flex;align-items:center;gap:12px;padding:8px;color:#fff;font-size:18px;background:linear-gradient(#d0e8ff,#b0d8ff 8%,#a0d0ff 12%,#67a6f7 18%,#67a6f7 30%,#2d6cd8 60%,#135ed4 70%,#0e4ab0);text-shadow:1px 1px #003a8d;box-shadow:inset 0 1px 0 #e8f4ff,inset 0 2px 0 #c8e4ff,inset 0 3px 0 #a0d0ff,inset 0 4px 1px #88baf866,inset 0 5px 1px #a0d0ff44,inset 0 -1px 0 #0006,inset 0 -2px 1px #0003,inset 1px 0 0 #b0d8ff44}.start-body{display:grid;grid-template-columns:1.18fr .82fr;min-height:355px}.start-primary,.start-secondary{padding:8px}.start-primary{background:#fff}.start-secondary{background:#d3e5fb;border-left:1px solid #9bb8df}.start-body button{display:flex;gap:9px;align-items:center;width:100%;min-height:46px;padding:6px;text-align:left;border:0;background:transparent}.start-body button:hover{color:#fff;background:#2f71cd}.start-body button>span:first-child{font-size:23px}.start-body button b{font-size:12px}.start-body button small{display:block;color:#777;font-weight:400}.start-body button:hover small{color:#edf4ff}.start-body hr{border:0;border-top:1px solid #ccc}.start-foot{display:flex;justify-content:flex-end;gap:12px;padding:8px;color:#fff;background:linear-gradient(#3a8de0,#2d78de 30%,#2d78de 50%,#1454b7);box-shadow:inset 0 1px 0 #6aa8f0,inset 0 -1px 0 #0004}.start-foot button{color:#fff;background:transparent;border:0}.taskbar{position:absolute;z-index:9999;inset:auto 0 0;height:var(--task);display:flex;align-items:stretch;color:#fff;background:linear-gradient(#8accff,#7ab8ff 4%,#3888f7 8%,#3888f7 18%,#1b63db 28%,#1b63db 35%,#245edb 73%,#245edb 78%,#174ac1);box-shadow:inset 0 1px 0 #9cd0ff,inset 0 2px 0 #7ab8ff,inset 0 3px 0 #5aa5ff,inset 0 4px 1px #4a9eff66,inset 0 5px 1px #3a8eff33,inset 0 -1px 0 #0006,inset 0 -2px 1px #0003,inset 0 -3px 2px #0001}.start-button{width:108px;display:flex;align-items:center;justify-content:center;gap:7px;color:#fff;font:italic 700 18px Arial;letter-spacing:-1px;border:0;border-radius:0 14px 14px 0;background:linear-gradient(#c0f0b0,#a8e89a 8%,#68bf58 18%,#68bf58 28%,#4aaf3a 42%,#3a9d32 55%,#237f22);box-shadow:inset 0 1px 0 #d0ffc0,inset 0 2px 0 #b8f0aa,inset 0 3px 0 #8dd981,inset 0 4px 1px #a0e89288,inset 0 5px 1px #b8f0aa44,inset -2px -2px #176516,inset -2px -3px 1px #0a4a0a55,inset -3px -3px 1px #05300533;overflow:hidden}.start-button.active{filter:brightness(.85)}.mini-flag{width:23px;height:22px}.quick-launch{display:flex;align-items:center;padding:0 7px;border-right:1px solid #0a48b7}.quick-launch button,.tray button{color:#fff;border:0;background:transparent}.task-items{min-width:0;flex:1;display:flex;gap:3px;align-items:center;padding:3px;overflow:hidden}.task-item{flex:0 1 172px;min-width:45px;height:32px;padding:0 8px;color:#fff;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:1px solid #0e3f9d;border-radius:3px;background:linear-gradient(#7ab8ff,#3f8af1 10%,#3f8af1 25%,#2464cf 65%,#2464cf 75%,#1a4fb0);box-shadow:inset 0 1px 0 #a5d0ff,inset 0 2px 1px #8fc0ff88,inset 1px 1px #73a8f1,inset -1px -1px #0a3280}.task-item.active{background:linear-gradient(#3a6fc8,#174da8 15%,#174da8 30%,#0d377c 70%,#0d377c);box-shadow:inset 0 2px 0 #2a5499,inset 0 3px 1px #1a448866,inset 1px 2px #0d377c}.tray{display:flex;align-items:center;gap:3px;padding:0 12px 0 8px;background:linear-gradient(#56d4ff,#23a7f2 15%,#23a7f2 30%,#1291dd 80%,#1291dd 85%,#087ac1);border-left:1px solid #0a66bc;box-shadow:inset 1px 0 #56c7ff,inset 2px 0 1px #7de4ff88,inset 0 1px 0 #7de4ff,inset 0 -1px 0 #0002}.tray time{min-width:69px;text-align:center;font-size:12px}.toast{position:absolute;right:20px;bottom:58px;z-index:10000;max-width:300px;padding:12px 15px;color:#111;background:linear-gradient(#fffce8,#fff7c4 40%,#fff09c);border:1px solid #111;border-radius:7px;box-shadow:2px 4px 12px #2227,inset 0 1px 0 #fff,inset 0 2px 1px #ffffffcc,inset 0 3px 1px #ffffff66,inset 1px 1px 0 #fff,inset -1px -1px #aca89944}
.context-menu{position:fixed;z-index:10001;min-width:180px;padding:3px;background:var(--panel);border:1px solid #a0a0a0;box-shadow:3px 4px 14px #0006,inset 0 1px 0 #fff,inset 0 2px 0 #ffffffee,inset 0 3px 1px #ffffffcc,inset 1px 1px #fff,inset 2px 2px 1px #ffffff44,inset -1px -1px #aca899,inset -1px -2px 1px #8a867844}.context-menu button{display:flex;gap:8px;align-items:center;width:100%;padding:5px 14px;color:#111;text-align:left;border:0;background:transparent}.context-menu button:hover{color:#fff;background:linear-gradient(#5aaaff,#3d95ff 12%,#1767e8 28%,#0755cf 65%,#0844a7);box-shadow:inset 0 1px 0 #9cddff,inset 0 2px 1px #3d95ff88,inset 0 3px 1px #5aaaff44}.context-menu hr{border:0;border-top:1px solid #c0c0c0;margin:3px 0}
.shutdown-screen{z-index:20000;display:grid;place-items:center;background:#173e8daa;backdrop-filter:blur(3px)}.shutdown-panel{width:min(490px,92vw);padding:26px;color:#fff;text-align:center;background:linear-gradient(#6e90d6,#5c7ec8);border-top:8px solid #184595;border-bottom:8px solid #184595;box-shadow:0 0 0 9999px #163a84aa}.shutdown-panel h2{margin-top:0;font-size:24px}.shutdown-panel>div{display:flex;justify-content:center;gap:32px;margin:25px 0}.shutdown-panel>div button{color:#fff;border:0;background:transparent}.power-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 7px;border:2px solid #fff;border-radius:8px;font-size:27px;box-shadow:inset 0 2px 0 #ffffff77,inset 0 3px 1px #ffffff44,inset 0 -2px 0 #0003,inset 0 -3px 1px #0002}.power-icon.yellow{background:linear-gradient(#ffd870,#e1a62b 40%,#c08a1a)}.power-icon.red{background:linear-gradient(#ff8a6e,#e44f35 40%,#b8341f)}.power-icon.green{background:linear-gradient(#80e870,#4eac42 40%,#3a8a30)}
@media(max-width:720px){:root{--task:48px}.login-main{grid-template-columns:1fr;gap:18px;padding:30px 22px}.login-brand{justify-self:center;text-align:center}.login-brand .large{margin-inline:auto}.login-divider{display:none}.user-card{width:min(400px,94vw);justify-self:center}.login-footer{padding:0 16px}.login-footer p{display:none}.desktop-icons{grid-template-columns:repeat(2,86px)}.xp-window{width:calc(100vw - 12px);left:6px!important;min-width:0}.about-layout,.projects-content{grid-template-columns:1fr}.xp-sidebar,.project-nav{display:flex;gap:7px;overflow-x:auto}.xp-sidebar .side-card{min-width:160px}.project-nav h3{display:none}.project-nav button{white-space:nowrap}.paper{padding:22px;width:100%}.resume-item{grid-template-columns:1fr;gap:2px}.quick-launch{display:none}.start-button{width:94px}.tray{padding-inline:5px}.tray button:first-child{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}.stat-card{padding:10px 12px;background:linear-gradient(#f0f5ff,#e0e8f5);border:1px solid #b0c4de;border-radius:4px;text-align:center;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #0001}.stat-card b{display:block;font-size:18px;color:var(--blue)}.stat-card small{font-size:11px;color:#666}
.skill-group small{display:block;color:#888;margin:2px 0 6px;font-size:11px}.skill-bars{display:flex;flex-direction:column;gap:5px;margin-top:4px}.skill-bar-item{display:flex;flex-direction:column;gap:2px}.skill-bar-label{display:flex;justify-content:space-between;font-size:12px}.skill-bar-label small{color:#888;margin:0!important}.skill-bar-track{height:8px;background:#e0e0e0;border:1px solid #b0b0b0;border-radius:2px;overflow:hidden}.skill-bar-fill{height:100%;background:linear-gradient(90deg,#4a90d9,#2a6cc0);border-radius:1px;box-shadow:inset 0 1px 0 #ffffff88}
.exp-achievements{margin:6px 0 0;padding-left:18px;font-size:12px;color:#444;line-height:1.7}.exp-achievements li{margin-bottom:2px}
.project-cover{display:none}.project-hero:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 50%,rgba(0,0,0,.25) 100%);pointer-events:none}.project-hero>div:last-child{position:relative;z-index:1}.project-hero h2,.project-hero small{text-shadow:1px 1px 2px rgba(0,0,0,.5)}.project-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.project-tags span{padding:2px 10px;font-size:11px;background:linear-gradient(#e8f0ff,#d0e0ff);border:1px solid #a0b8e0;border-radius:10px;color:#335588}.project-section{margin:10px 0;padding:8px 12px;background:#f5f8fc;border-left:3px solid var(--blue);border-radius:0 4px 4px 0}.project-section h4{margin:0 0 4px;font-size:13px;color:var(--blue)}.project-section p{margin:0;font-size:12px;line-height:1.6}.project-metrics{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.metric-item{padding:8px 14px;background:linear-gradient(#f0f5ff,#e0e8f5);border:1px solid #b0c4de;border-radius:4px;text-align:center;min-width:100px}.metric-item small{display:block;font-size:11px;color:#666}.metric-item b{font-size:13px;color:var(--blue)}.project-tools{margin:8px 0;padding:6px 10px;font-size:12px;color:#555;background:#f5f5f5;border:1px solid #ddd;border-radius:3px}
.poster-gallery{margin-top:14px}.poster-cats{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #ddd}.poster-cat-btn{padding:3px 12px;font-size:12px;border:1px solid #a0b0c0;background:linear-gradient(#f8f8f8,#e8e8e8);border-radius:3px;cursor:pointer;color:#333}.poster-cat-btn:hover{background:linear-gradient(#e8f0ff,#d0e0ff)}.poster-cat-btn.active{background:linear-gradient(#5aaaff,#3d95ff 12%,#1767e8);color:#fff;border-color:#0755cf}.poster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;max-height:360px;overflow-y:auto;padding:4px}.poster-item{cursor:pointer;border:2px solid transparent;border-radius:3px;overflow:hidden;background:#fff;transition:border-color .15s}.poster-item:hover{border-color:var(--blue)}.poster-item img{width:100%;height:100px;object-fit:cover;display:block}.poster-item span{display:block;padding:3px 6px;font-size:10px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.poster-overlay{position:absolute;inset:0;z-index:100;display:grid;place-items:center;background:rgba(0,0,0,.85);backdrop-filter:blur(2px)}.poster-overlay-inner{max-width:90%;max-height:90%;text-align:center;position:relative}.poster-overlay-inner img{max-width:100%;max-height:65vh;border:4px solid #fff;box-shadow:0 4px 30px #0008}.poster-overlay-inner p{color:#fff;margin:8px 0 0;font-size:14px}.poster-overlay-close{position:absolute;top:-36px;right:0;padding:4px 14px;background:var(--panel);border:1px solid #888;border-radius:3px;cursor:pointer;font-size:12px}
.case-showcase{margin-top:14px;padding:12px;border:1px solid #b0c4de;background:#f8fbff;border-radius:3px}.case-showcase h4{margin:0 0 8px;font-size:14px;color:var(--blue);border-bottom:1px solid #d0e0f0;padding-bottom:6px}.case-item{padding:10px 0}.case-item-sep{border-top:2px dashed #c0d0e8;margin-top:10px;padding-top:14px}.case-header{margin-bottom:10px}.case-header b{display:block;font-size:13px;color:#222}.case-header small{display:block;margin-top:3px;font-size:11px;color:#888}.case-container{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.case-video-wrap{position:relative}.case-video-cover{position:relative;cursor:pointer;border:2px solid #888;background:#000;overflow:hidden;aspect-ratio:3/4}.case-video-cover img{width:100%;height:100%;object-fit:cover;display:block}.case-video-cover:hover .case-play-btn{background:rgba(0,80,200,.85)}.case-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;display:grid;place-items:center;font-size:20px;color:#fff;background:rgba(0,0,0,.6);border:2px solid #fff;border-radius:50%;text-align:center;pointer-events:none;transition:background .15s}.case-video-hint{display:block;text-align:center;margin-top:4px;font-size:10px;color:#999}.case-data-side{display:flex;flex-direction:column;gap:10px}.case-data-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.case-data-card{padding:10px 8px;background:linear-gradient(#f0f5ff,#e0e8f5);border:1px solid #b0c4de;border-radius:3px;text-align:center}.case-data-card small{display:block;font-size:11px;color:#666;margin-bottom:4px}.case-data-card b{display:block;font-size:18px;color:var(--blue);font-weight:700}.case-aux-data{padding:6px 10px;font-size:11px;color:#555;background:#f5f5f5;border:1px solid #ddd;border-radius:3px;text-align:center}.case-highlight{padding:6px 10px;font-size:11px;font-weight:700;color:#b8860b;background:linear-gradient(#fffbe6,#fff4c0);border:1px solid #e8d060;border-radius:3px;text-align:center}.case-process{margin-top:14px}.case-process h5{margin:0 0 8px;font-size:13px;color:var(--blue)}.case-timeline{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}.case-step{min-width:160px;flex:1;padding:8px 10px;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:11px}.case-step b{display:block;font-size:12px;color:var(--blue);margin-bottom:4px}.case-step p{margin:0;line-height:1.5;color:#555}.case-review{margin-top:14px;padding:10px 12px;background:#fff;border:1px solid #ccc;border-left:3px solid var(--blue);border-radius:0 3px 3px 0}.case-review h5{margin:0 0 6px;font-size:13px;color:var(--blue)}.case-review p{margin:0 0 6px;font-size:12px;line-height:1.7;color:#444}.case-review p:last-child{margin-bottom:0}.case-tools{margin-top:10px;padding:6px 10px;font-size:12px;color:#555;background:#f5f5f5;border:1px solid #ddd;border-radius:3px}.case-proof{margin-top:12px;text-align:center}.case-proof-btn{min-width:140px}.case-modal-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(0,0,0,.8);backdrop-filter:blur(2px)}.case-modal-close{position:absolute;top:-30px;right:0;padding:4px 14px;background:var(--panel);border:1px solid #888;border-radius:3px;cursor:pointer;font-size:12px;color:#333}.case-modal-close:hover{background:#fff}.case-video-modal{position:relative;height:90vh;aspect-ratio:9/16;max-width:95vw}.case-video-modal video{width:100%;height:100%;object-fit:contain;background:#000;border:2px solid #fff;box-shadow:0 4px 30px #0008}.case-proof-modal{position:relative;width:90%;max-width:600px;max-height:85vh;background:var(--panel);border:3px solid var(--blue);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}.case-proof-head{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:linear-gradient(#3d95ff,#1767e8);color:#fff;font-size:13px;text-shadow:1px 1px #00368e}.case-proof-head .case-modal-close{position:static;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:3px}.case-proof-head .case-modal-close:hover{background:rgba(255,255,255,.35)}.case-proof-scroll{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:12px}.proof-img-item{text-align:center}.proof-img-item img{max-width:100%;border:2px solid #ccc;cursor:pointer;transition:border-color .15s;display:block;margin:0 auto}.proof-img-item img:hover{border-color:var(--blue)}.proof-img-item small{display:block;margin-top:4px;font-size:11px;color:#888}.proof-fullscreen{z-index:10000}.proof-fullscreen-inner{position:relative;max-width:92%;max-height:92vh}.proof-fullscreen-inner img{max-width:100%;max-height:92vh;border:4px solid #fff;box-shadow:0 4px 30px #0008;display:block}.proof-fullscreen-inner .case-modal-close{top:-32px}
.contact-page{height:100%;display:flex;flex-direction:column;background:#ece9d8}.contact-header{padding:18px 20px 12px;background:linear-gradient(180deg,#fff,#ece9d8);border-bottom:1px solid #aaa;text-align:center}.contact-header h2{margin:0;font-size:22px;color:#174b99}.contact-header p{margin:4px 0 0;font-size:13px;color:#666}.contact-layout{flex:1;display:grid;grid-template-columns:1fr 260px;gap:14px;padding:16px;overflow:auto}.contact-info-panel{display:flex;flex-direction:column;gap:10px}.contact-card{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#fff;border:1px solid #c5d6ef;border-radius:5px;box-shadow:0 1px 3px #0001;transition:border-color .2s,box-shadow .2s}.contact-card:hover{border-color:#7da2ce;box-shadow:0 2px 8px #0002}.cc-top{display:flex;align-items:center;gap:12px;min-width:0}.cc-icon{flex:none;width:36px;height:36px;display:grid;place-items:center;font-size:18px;background:#eef5ff;border:1px solid #c5d6ef;border-radius:50%}.cc-body{min-width:0}.cc-body b{display:block;font-size:12px;color:#888;margin-bottom:2px}.cc-body a,.cc-body span{font-size:14px;color:#333;text-decoration:none;word-break:break-all}.cc-body a:hover{color:#174b99;text-decoration:underline}.cc-copy{flex:none;padding:4px 12px;font-size:12px;color:#174b99;border:1px solid #aac1e6;border-radius:3px;background:linear-gradient(#fff,#eef5ff);cursor:pointer;transition:filter .15s}.cc-copy:hover{filter:brightness(.95)}.cc-copy:active{transform:scale(.95)}.cc-copy.copied{color:#2a7a2a;border-color:#6abe6a;background:linear-gradient(#f0fff0,#d8f5d8)}.contact-qr-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 16px;background:#fff;border:1px solid #c5d6ef;border-radius:5px;box-shadow:0 1px 3px #0001}.qr-frame{padding:8px;background:#fff;border:2px solid #174b99;border-radius:8px;box-shadow:0 4px 16px #0002}.qr-frame img{display:block;width:200px;height:auto;border-radius:4px}.qr-label{margin:14px 0 4px;font-size:15px;font-weight:700;color:#174b99}.qr-hint{font-size:11px;color:#888;text-align:center;line-height:1.5}
@media(max-width:720px){.stats-grid{grid-template-columns:1fr 1fr}.contact-layout{grid-template-columns:1fr}.poster-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.poster-item img{height:80px}.resume-skills{grid-template-columns:1fr}.case-container{grid-template-columns:1fr}.case-data-grid{grid-template-columns:1fr 1fr}.case-timeline{flex-direction:column}.case-step{min-width:auto}}
.case-summary{margin-top:14px;padding:12px;border:1px solid #b0c4de;background:#f8fbff;border-radius:3px}
.case-summary>h4{margin:0 0 10px;font-size:14px;color:var(--blue);border-bottom:1px solid #d0e0f0;padding-bottom:6px}
.summary-section{margin-bottom:14px}
.summary-section:last-child{margin-bottom:0}
.summary-section h5{margin:0 0 8px;font-size:13px;color:var(--blue)}
.data-table-wrap{overflow-x:auto;border:1px solid #b0c4de;border-radius:3px;background:#fff}
.data-table{width:100%;border-collapse:collapse;font-size:12px;min-width:480px}
.data-table th{padding:8px 10px;text-align:left;font-size:11px;color:#fff;background:linear-gradient(#3d95ff,#1767e8 50%,#0755cf);border:1px solid #0755cf;text-shadow:1px 1px #00368e;white-space:nowrap}
.data-table td{padding:7px 10px;border:1px solid #d0d8e8;color:#333;white-space:nowrap}
.data-table tbody tr{cursor:pointer;transition:background .15s}
.data-table tbody tr:hover{background:#e0ecff}
.data-table .play-count{font-size:14px;font-weight:700;color:var(--blue)}
.table-summary{margin:8px 0 0;padding:6px 10px;font-size:12px;color:#444;background:#fffbe6;border:1px solid #e8d060;border-radius:3px;font-weight:600}
.method-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.method-item{padding:10px;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:11px}
.method-item b{display:block;font-size:12px;color:var(--blue);margin-bottom:5px}
.method-item p{margin:0;line-height:1.5;color:#555}
.flow-chain{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.flow-step{padding:6px 12px;font-size:11px;color:#174b99;background:linear-gradient(#e8f0ff,#d0e0ff);border:1px solid #a0b8e0;border-radius:3px;white-space:nowrap;font-weight:600}
.flow-arrow{font-size:14px;color:var(--blue);font-weight:700}
.summary-text{padding:10px 14px;background:#fff;border:1px solid #ccc;border-left:3px solid var(--blue);border-radius:0 3px 3px 0}
.summary-text p{margin:0 0 8px;font-size:12px;line-height:1.7;color:#444}
.summary-text p:last-child{margin-bottom:0}
.capability-tags{display:flex;flex-wrap:wrap;gap:6px}
.capability-tags span{padding:5px 12px;font-size:11px;font-weight:600;color:#174b99;background:linear-gradient(#e8f0ff,#d0e0ff);border:1px solid #a0b8e0;border-radius:3px}
@media(max-width:720px){.method-grid{grid-template-columns:repeat(2,1fr)}.flow-chain{flex-direction:column;align-items:center}.flow-arrow{transform:rotate(90deg)}.data-table{min-width:420px}}
@media(max-width:480px){.method-grid{grid-template-columns:1fr}}
.case-accounts{margin-top:14px;padding:12px;border:1px solid #b0c4de;background:#f8fbff;border-radius:3px}
.case-accounts>h4{margin:0 0 6px;font-size:14px;color:var(--blue);border-bottom:1px solid #d0e0f0;padding-bottom:6px}
.accounts-hint{margin:0 0 12px;font-size:12px;color:#888}
.accounts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.account-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fafcff;border:1px solid #c5d6ef;border-radius:4px;overflow:hidden;cursor:pointer}
.account-card[aria-disabled="true"]{cursor:default;opacity:.85}
.account-card:active{box-shadow:inset 1px 1px 3px rgba(0,0,0,.15)}
.account-card:hover .account-image-wrap{box-shadow:inset 0 0 0 2px rgba(74,142,222,.5)}
.account-card:hover .account-visit{color:#0a3d8e}
.account-image-wrap{position:relative;background:#fff;border-bottom:1px solid #d0e0f0;display:flex;align-items:center;justify-content:center;padding:6px;transition:box-shadow .15s}
.account-image-wrap img{width:100%;height:auto;object-fit:contain;display:block}
.account-image-wrap.img-error img{display:none}
.account-img-fallback{display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px 10px;gap:4px}
.account-image-wrap.img-error .account-img-fallback{display:flex}
.account-img-fallback b{font-size:14px;color:var(--blue)}
.account-img-fallback small{font-size:12px;color:#888}
.account-info{display:flex;flex-direction:column;gap:6px;padding:8px 10px}
.account-platform-tag{align-self:flex-start;padding:2px 8px;font-size:10px;font-weight:600;color:#fff;background:linear-gradient(#3d95ff,#1767e8);border-radius:2px;white-space:nowrap}
.account-name{font-size:13px;color:#222;word-break:break-all}
.account-actions{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px}
.account-visit{font-size:11px;color:var(--blue);font-weight:600;white-space:nowrap;transition:color .15s}
.account-card[aria-disabled="true"] .account-visit{color:#999}
.account-copy-btn{flex:none;padding:3px 8px;font-size:11px;color:#174b99;border:1px solid #aac1e6;border-radius:3px;background:linear-gradient(#fff,#eef5ff);cursor:pointer;white-space:nowrap;transition:filter .15s,box-shadow .15s}
.account-copy-btn:hover{filter:brightness(.95)}
.account-copy-btn:active{box-shadow:inset 1px 1px 2px rgba(0,0,0,.15)}
.account-copy-btn.copied{color:#2a7a2a;border-color:#6abe6a;background:linear-gradient(#f0fff0,#d8f5d8)}
.accounts-note{margin:12px 0 0;font-size:12px;color:#666;line-height:1.6;text-align:center}
@media(max-width:720px){.accounts-grid{grid-template-columns:1fr}}
.page-nav{position:sticky;top:0;z-index:50;display:flex;gap:0;margin:0 0 14px;padding:0;background:linear-gradient(#fff,#ece9d8);border:1px solid #aca899;border-radius:3px;box-shadow:inset 0 1px 0 #fff,0 2px 4px #0001}
.page-nav-btn{padding:8px 18px;font-size:12px;color:#444;border:0;background:transparent;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;transition:background .12s,color .12s}
.page-nav-btn:hover{background:#dbe9ff;color:#174b99}
.page-nav-btn:focus{outline:1px dotted #174b99;outline-offset:-2px}
.page-nav-btn.active{color:#fff;background:linear-gradient(#3d95ff,#1767e8 50%,#0755cf);border-bottom-color:#0755cf;font-weight:600;text-shadow:1px 1px #00368e}
.showcase-tabs{display:flex;gap:2px;padding:6px 6px 0;background:#ece9d8;border:1px solid #aca899;border-bottom:0;border-radius:3px 3px 0 0;overflow-x:auto}
.showcase-tab{flex:0 0 auto;padding:7px 16px;font-size:12px;color:#444;border:1px solid #aca899;border-bottom:0;border-radius:4px 4px 0 0;background:linear-gradient(#f8f8f4,#e0ddd0);cursor:pointer;white-space:nowrap;transition:background .12s}
.showcase-tab:hover{background:linear-gradient(#fff,#e8e6da)}
.showcase-tab:focus{outline:1px dotted #174b99;outline-offset:-2px}
.showcase-tab.active{color:#fff;background:linear-gradient(#3d95ff,#1767e8 50%,#0755cf);border-color:#0755cf;font-weight:600;text-shadow:1px 1px #00368e}
.showcase-panels{border:1px solid #aca899;border-top:0;border-radius:0 0 3px 3px;background:#f8fbff;padding:14px;overflow:hidden}
.showcase-panel[hidden]{display:none}
.case-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.case-toggle-btn{min-width:auto;padding:4px 12px;font-size:12px}
.case-process-collapse[hidden],.case-review-collapse[hidden]{display:none}
.case-process-collapse,.case-review-collapse{margin-top:10px;padding:10px 12px;background:#fff;border:1px solid #ccc;border-radius:3px;animation:collapseOpen .2s ease}
.case-process-collapse h5,.case-review-collapse h5{margin:0 0 8px;font-size:13px;color:var(--blue)}
.case-timeline-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.case-review-collapse p{margin:0 0 6px;font-size:12px;line-height:1.7;color:#444}
.case-review-collapse p:last-child{margin-bottom:0}
@keyframes collapseOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.quick-actions{position:sticky;bottom:14px;z-index:60;display:flex;flex-direction:column;gap:6px;width:fit-content;margin-left:auto;opacity:0;pointer-events:none;transition:opacity .2s}
.quick-actions.visible{opacity:1;pointer-events:auto}
.quick-action-btn{width:38px;height:38px;display:grid;place-items:center;font-size:16px;color:#174b99;border:1px solid #174ea6;border-radius:50%;background:linear-gradient(#fff,#eef5ff);cursor:pointer;box-shadow:0 2px 8px #0002,inset 0 1px 0 #fff;transition:transform .1s,background .12s}
.quick-action-btn:hover{background:linear-gradient(#fff,#dbe9ff)}
.quick-action-btn:active{transform:scale(.9)}
.quick-action-btn:focus{outline:2px solid #3d95ff;outline-offset:1px}
.proof-gallery-overlay .proof-gallery-modal{position:relative;width:92%;max-width:680px;max-height:90vh;background:var(--panel);border:3px solid var(--blue);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.proof-gallery-head{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:linear-gradient(#3d95ff,#1767e8);color:#fff;font-size:13px;text-shadow:1px 1px #00368e}
.proof-gallery-head .case-modal-close{position:static;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:3px}
.proof-gallery-head .case-modal-close:hover{background:rgba(255,255,255,.35)}
.proof-gallery-stage{position:relative;flex:1;min-height:200px;display:flex;align-items:center;justify-content:center;overflow:auto;background:#1a1a1a;padding:10px}
.proof-main{max-width:100%;max-height:60vh;object-fit:contain;transition:transform .15s;transform-origin:center;user-select:none;-webkit-user-drag:none}
.proof-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;font-size:22px;color:#fff;background:rgba(0,0,0,.5);border:1px solid #fff;border-radius:50%;cursor:pointer;z-index:2}
.proof-nav:hover{background:rgba(0,80,200,.8)}
.proof-nav.prev{left:8px}
.proof-nav.next{right:8px}
.proof-gallery-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;background:#ece9d8;border-top:1px solid #aaa;font-size:11px}
.proof-zoom-ctrls{display:flex;gap:4px}
.proof-zoom-btn{width:28px;height:24px;font-size:14px;color:#333;border:1px solid #888;background:linear-gradient(#fff,#e8e5d8);border-radius:3px;cursor:pointer}
.proof-zoom-btn:hover{background:linear-gradient(#e8f0ff,#d0e0ff)}
.proof-thumbs{display:flex;gap:4px;padding:6px 8px;background:#ece9d8;border-top:1px solid #aaa;overflow-x:auto}
.proof-thumb{flex:0 0 auto;width:48px;height:48px;border:2px solid transparent;border-radius:3px;overflow:hidden;cursor:pointer}
.proof-thumb img{width:100%;height:100%;object-fit:cover}
.proof-thumb.active{border-color:var(--blue)}
@media(max-width:720px){.page-nav-btn{padding:6px 12px}.showcase-tab{padding:6px 10px}.case-timeline-grid{grid-template-columns:1fr}.case-actions{flex-direction:column}.case-actions .xp-button{width:100%}}
/* ===== Global XP Focus Reading Effects ===== */
/* Info cards: light blue bg + dark blue border, titles/numbers deepen */
.xp-focus-card{transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
.xp-focus-card:hover,.xp-focus-card:focus-within{background:#dbe9ff;border-color:#0a4caa;box-shadow:inset 0 0 0 1px #0a4caa}
.xp-focus-card:hover b,.xp-focus-card:focus-within b{color:#0a3d8e}
.xp-focus-card:hover h4,.xp-focus-card:focus-within h4,.xp-focus-card:hover h5,.xp-focus-card:focus-within h5{color:#0a3d8e}
/* Table/list rows: highlight entire row with left blue accent */
.xp-focus-row{transition:background .15s ease,box-shadow .15s ease}
.xp-focus-row:hover,.xp-focus-row:focus-within{background:#dbe9ff;box-shadow:inset 3px 0 0 #0a4caa}
/* Process steps: light yellow bg + amber border */
.xp-focus-step{transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
.xp-focus-step:hover,.xp-focus-step:focus-within{background:#fffbe6;border-color:#d4a020;box-shadow:inset 0 0 0 1px #d4a020}
.xp-focus-step:hover b,.xp-focus-step:focus-within b{color:#a06c00}
/* Long text panels: slightly brighter bg + deeper left blue line */
.xp-focus-panel{transition:background .15s ease,border-left-color .15s ease}
.xp-focus-panel:hover,.xp-focus-panel:focus-within{background:#f8fbff;border-left-color:#0a3d8e}
/* Clickable actions: subtle blue highlight */
.xp-focus-action{transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
.xp-focus-action:hover,.xp-focus-action:focus-visible{background:#e8f0ff;border-color:#7da2ce;box-shadow:inset 0 0 0 1px #7da2ce}
.xp-focus-action:focus-visible{outline:1px dotted #0a4caa;outline-offset:-1px}
/* Touch devices: use :active as tap feedback */
@media(hover:none){.xp-focus-card:active{background:#dbe9ff;border-color:#0a4caa}.xp-focus-row:active{background:#dbe9ff}.xp-focus-step:active{background:#fffbe6;border-color:#d4a020}.xp-focus-panel:active{background:#f8fbff;border-left-color:#0a3d8e}.xp-focus-action:active{background:#e8f0ff}}
/* Reduced motion: disable transitions */
@media(prefers-reduced-motion:reduce){.xp-focus-card,.xp-focus-row,.xp-focus-step,.xp-focus-panel,.xp-focus-action{transition:none}}
/* ===== Visual Lab Modules ===== */
.visual-directions-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.visual-direction-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;background:#fff;border:2px solid #b0c4de;border-radius:4px;text-align:center;cursor:pointer;font:inherit;color:#333}
.visual-direction-card b{font-size:12px;color:#333}
.visual-direction-card small{font-size:10px;color:#888;line-height:1.4}
.visual-direction-card.active{background:linear-gradient(#cde0ff,#b8d0f5);border-color:#0a4caa;box-shadow:inset 0 0 0 2px #0a4caa,inset 0 2px 4px #ffffff66}
.visual-direction-card.active b{color:#0a3d8e}
.visual-direction-card.active:hover,.visual-direction-card.active:focus-visible{background:linear-gradient(#cde0ff,#b8d0f5);border-color:#0a4caa;box-shadow:inset 0 0 0 2px #0a4caa,inset 0 2px 4px #ffffff66}
.visual-direction-img{width:100%;aspect-ratio:4/3;background:#f0f0f0;border:1px solid #ddd;border-radius:3px;overflow:hidden;display:grid;place-items:center}
.visual-direction-img img{width:100%;height:100%;object-fit:cover;display:block}
.visual-img-placeholder{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#f0f0f0,#f0f0f0 6px,#e8e8e8 6px,#e8e8e8 12px);color:#aaa;font-size:11px;text-align:center;min-height:60px}
.visual-cover-placeholder{position:absolute;inset:0;min-height:0}
.visual-prompt-img-placeholder{aspect-ratio:4/3}
.visual-works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.visual-works-empty{grid-column:1/-1;padding:30px 20px;text-align:center;background:#f8f8f8;border:2px dashed #ccc;border-radius:4px}
.visual-works-empty p{font-size:14px;color:#666;margin:0 0 6px}
.visual-works-empty small{font-size:12px;color:#aaa}
.visual-work-card{display:flex;flex-direction:column;background:#fff;border:2px solid #b0c4de;border-radius:4px;overflow:hidden}
.visual-work-cover{position:relative;cursor:pointer;border-bottom:2px solid #b0c4de;background:#000;overflow:hidden;aspect-ratio:3/4}
.visual-work-cover img{width:100%;height:100%;object-fit:cover;display:block}
.visual-work-info{padding:10px;display:flex;flex-direction:column;gap:6px;flex:1}
.visual-work-title{font-size:13px;color:#222}
.visual-work-direction-tag{display:inline-block;padding:2px 8px;font-size:10px;font-weight:600;color:#174b99;background:linear-gradient(#e8f0ff,#d0e0ff);border:1px solid #a0b8e0;border-radius:3px;align-self:flex-start}
.visual-work-creative{font-size:11px;color:#666;line-height:1.5;margin:0}
.visual-work-meta{display:flex;gap:6px;flex-wrap:wrap}
.visual-work-meta span{font-size:10px;color:#888;background:#f5f5f5;padding:2px 6px;border:1px solid #eee;border-radius:2px}
.visual-work-tools{font-size:10px;color:#777}
.visual-work-tools b{color:#555}
.visual-work-actions{display:flex;gap:6px;margin-top:auto;padding-top:6px}
.visual-work-actions .xp-button{min-width:auto;padding:4px 8px;font-size:11px;flex:1;text-align:center}
.visual-work-actions a.xp-button{text-decoration:none;display:inline-block;box-sizing:border-box}
.visual-process-detail{padding:12px;background:#fff;border:1px solid #ddd;border-left:3px solid var(--blue);border-radius:0 3px 3px 0;min-height:60px}
.visual-simple-process-overlay .case-modal-window{width:90%;max-width:560px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 4px 30px #0006}
.visual-simple-process-overlay .window-body{flex:1;overflow-y:auto;padding:12px 14px;background:#ece9d8}
.visual-simple-process-content{display:flex;flex-direction:column;gap:10px}
.visual-process-steps{display:flex;flex-direction:column;gap:8px}
.visual-process-detail .vps-step{display:block;font-size:12px;color:var(--blue);font-weight:700;margin-bottom:6px}
.visual-process-detail p{margin:0;font-size:12px;color:#444;line-height:1.7}
.vps-image-wrap{margin-top:10px;text-align:center}
.vps-image{max-width:100%;max-height:280px;border:2px solid #ccc;border-radius:3px;cursor:pointer;transition:border-color .15s;object-fit:contain}
.vps-image:hover{border-color:var(--blue)}
.vps-image-desc{display:block;margin-top:6px;font-size:11px;color:#888;line-height:1.5}
.visual-process-summary{padding:10px 12px;background:linear-gradient(#fffbe6,#fff4c0);border:1px solid #e8d060;border-radius:3px}
.visual-process-summary h4{margin:0 0 6px;font-size:13px;color:#b8860b}
.visual-process-summary p{margin:0;font-size:12px;color:#665500;line-height:1.7}
.visual-process-placeholder{font-size:12px;color:#999;text-align:center;padding:20px 10px;margin:0}
.visual-process-field{margin-bottom:12px}
.visual-process-field:last-child{margin-bottom:0}
.visual-process-field small{display:block;font-size:11px;color:#888;margin-bottom:4px;font-weight:600}
.visual-process-field p{font-size:12px;color:#444;line-height:1.6;margin:0}
.visual-process-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.visual-process-img{width:100%;border:2px solid #ccc;border-radius:3px;display:block;object-fit:contain;max-height:200px}
.visual-prompts-container{display:flex;flex-direction:column;gap:12px}
.visual-prompt-card{background:#fff;border:2px solid #b0c4de;border-radius:4px;overflow:hidden}
.visual-prompt-head{padding:8px 12px;background:linear-gradient(#f0f5ff,#e0e8f5);border-bottom:1px solid #c0d0e8}
.visual-prompt-head b{font-size:13px;color:var(--blue)}
.visual-prompt-body{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}
.visual-prompt-side{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.visual-prompt-arrow{display:grid;place-items:center;padding:0 8px;background:linear-gradient(#e8e8e8,#d8d8d8);border-left:1px solid #ccc;border-right:1px solid #ccc;font-size:18px;color:#888}
.visual-prompt-field small{display:block;font-size:10px;color:#888;margin-bottom:3px;font-weight:600}
.visual-prompt-field p{font-size:11px;color:#444;line-height:1.5;margin:0}
.visual-prompt-summary{color:#666}
.visual-prompt-full{font-size:11px;color:#333;line-height:1.6;background:#f8f8f8;padding:6px 8px;border:1px solid #eee;border-radius:3px;white-space:pre-wrap;word-break:break-word;margin-top:4px}
.visual-prompt-toggle{min-width:auto;padding:3px 8px;font-size:10px;align-self:flex-start;margin-top:2px}
.visual-prompt-img{margin-top:4px}
.visual-prompt-img img{width:100%;border:2px solid #ccc;border-radius:3px;display:block;object-fit:contain;max-height:180px}
.visual-tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.visual-tool-category{padding:10px 12px;background:#fff;border:2px solid #b0c4de;border-radius:4px}
.visual-tool-category b{display:block;font-size:12px;color:var(--blue);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid #e0e8f0}
.visual-tool-list{display:flex;flex-wrap:wrap;gap:6px}
.visual-tool-tag{padding:4px 10px;font-size:11px;font-weight:600;color:#174b99;background:linear-gradient(#e8f0ff,#d0e0ff);border:1px solid #a0b8e0;border-radius:3px}
@media(max-width:720px){.visual-directions-grid{grid-template-columns:repeat(3,1fr)}.visual-works-grid{grid-template-columns:1fr}.visual-prompt-body{grid-template-columns:1fr}.visual-prompt-arrow{transform:rotate(90deg);padding:8px 0}.visual-prompt-side:first-child{border-bottom:1px solid #ccc}.visual-tools-grid{grid-template-columns:1fr}}
@media(max-width:480px){.visual-directions-grid{grid-template-columns:repeat(2,1fr)}}
/* ===== Visual Work Card Enhancements ===== */
.visual-work-number{position:absolute;top:6px;left:6px;z-index:2;padding:2px 8px;font:bold 11px Arial;color:#fff;background:linear-gradient(#3d95ff,#1767e8 50%,#0755cf);border:1px solid #fff;border-radius:3px;text-shadow:1px 1px #00368e;box-shadow:inset 0 1px 0 #9cddff}
.visual-work-tags{display:flex;flex-wrap:wrap;gap:3px}
.visual-work-tags span{padding:1px 6px;font-size:9px;color:#555;background:#f0f0f0;border:1px solid #ddd;border-radius:2px}
/* ===== Visual Work Detail Modal ===== */
.visual-detail-overlay{z-index:9999}
.visual-detail-modal{position:relative;width:90%;max-width:720px;max-height:88vh;background:var(--panel);border:3px solid var(--blue);border-top-color:#2f78ff;border-radius:8px 8px 2px 2px;box-shadow:3px 6px 22px #06285566;overflow:hidden;display:flex;flex-direction:column}
.visual-detail-head{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;color:#fff;background:linear-gradient(#e0f0ff,#cae8ff 4%,#9cddff 6%,#5aaaff 8%,#3d95ff 12%,#1767e8 24%,#0a5ee0 50%,#0755cf);text-shadow:1px 1px #00368e;box-shadow:inset 0 1px 0 #fff}
.visual-detail-head b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visual-detail-head .case-modal-close{position:static;padding:2px 12px;color:#fff;background:linear-gradient(#fff0e8,#f7a68c 28%,#d3270a 60%,#a01a05);border:1px solid #fff;border-radius:3px;cursor:pointer;font-size:12px}
.visual-detail-head .case-modal-close:hover{filter:brightness(1.1)}
.visual-detail-tabs{display:flex;gap:1px;padding:4px 4px 0;background:#ece9d8;border-bottom:1px solid #aca899;overflow-x:auto}
.visual-detail-tab{padding:4px 12px;font:inherit;font-size:12px;color:#164c9b;background:linear-gradient(#fff,#ece9d8);border:1px solid #aca899;border-bottom:0;border-radius:3px 3px 0 0;cursor:pointer;white-space:nowrap}
.visual-detail-tab:hover{background:linear-gradient(#fff,#dbe9ff)}
.visual-detail-tab.active{color:#fff;background:linear-gradient(#3d95ff,#1767e8 50%,#0755cf);text-shadow:1px 1px #00368e;border-color:#0755cf}
.visual-detail-body{flex:1;overflow-y:auto;padding:16px}
.visual-detail-panel[hidden]{display:none}
.vd-section{margin-bottom:14px;padding:10px 14px;background:#f8fbff;border:1px solid #d0e0f0;border-radius:3px}
.vd-section:last-child{margin-bottom:0}
.vd-section h5{margin:0 0 8px;font-size:13px;color:var(--blue)}
.vd-section p{margin:0 0 6px;font-size:12px;line-height:1.7;color:#444}
.vd-section p:last-child{margin-bottom:0}
.vd-tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.vd-tool-item{padding:8px 10px;background:#fff;border:1px solid #c5d6ef;border-radius:3px}
.vd-tool-item small{display:block;font-size:10px;color:#888;margin-bottom:3px}
.vd-tool-item b{font-size:12px;color:#174b99}
.vd-durations{display:flex;gap:14px;flex-wrap:wrap}
.vd-durations span{font-size:12px;color:#555}
.vd-durations b{color:var(--blue)}
.vd-comparison{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start}
.vd-compare-side{padding:10px;background:#fff;border:1px solid #c5d6ef;border-radius:3px;text-align:center}
.vd-compare-side h5{margin:0 0 8px;font-size:12px;color:var(--blue)}
.vd-compare-img{width:100%;max-height:280px;object-fit:contain;border:2px solid #ccc;border-radius:3px;cursor:pointer;transition:border-color .15s;display:block;margin-bottom:8px}
.vd-compare-img:hover{border-color:var(--blue)}
.vd-compare-side p{margin:0;font-size:11px;color:#666;line-height:1.5}
.vd-compare-arrow{display:flex;align-items:center;justify-content:center;padding:0 6px}
.vd-compare-arrow span{writing-mode:vertical-rl;text-orientation:upright;font-size:11px;color:#888;background:linear-gradient(#f0f0f0,#e0e0e0);padding:8px 4px;border:1px solid #ccc;border-radius:3px;white-space:nowrap}
.vd-list{margin:0;padding-left:18px;font-size:12px;color:#444;line-height:1.8}
.vd-list li{margin-bottom:3px}
.vd-list-issues li{color:#a04020}
.vd-list-solutions li{color:#206020}
.vd-note{margin-top:10px;padding:6px 10px;font-size:11px;color:#888;font-style:italic;background:#f5f5f5;border:1px dashed #ccc;border-radius:3px}
.vd-problems{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vd-problem-side{padding:10px 12px;background:#fff;border:1px solid #c5d6ef;border-radius:3px}
.vd-problem-side h5{margin:0 0 8px;font-size:12px;color:var(--blue);padding-bottom:4px;border-bottom:1px solid #e0e8f0}
.vd-problem-side:first-child h5{color:#a04020}
.vd-problem-side:last-child h5{color:#206020}
/* ===== Visual Image Viewer Modal ===== */
.visual-image-overlay{z-index:10000}
.visual-image-modal{position:relative;max-width:90vw;max-height:90vh}
.visual-image-modal img{max-width:90vw;max-height:85vh;object-fit:contain;border:4px solid #fff;box-shadow:0 4px 30px #0008;display:block}
.visual-image-modal .case-modal-close{position:absolute;top:-30px;right:0;padding:4px 14px;background:var(--panel);border:1px solid #888;border-radius:3px;cursor:pointer;font-size:12px;color:#333}
.visual-image-modal .case-modal-close:hover{background:#fff}
@media(max-width:720px){.vd-tools-grid{grid-template-columns:1fr}.vd-comparison{grid-template-columns:1fr}.vd-compare-arrow{display:flex;justify-content:center;padding:6px 0}.vd-compare-arrow span{writing-mode:horizontal-tb;text-orientation:initial}.vd-problems{grid-template-columns:1fr}}

/* ===== Liusannmei Project - Purple Theme ===== */
.project-hero.alt-liusannmei{background:linear-gradient(135deg,#2a0f4a 0%,#4a1f7a 30%,#6b3fa0 55%,#8b5fc5 75%,#c9a8f0 100%)}
.project-hero.alt-liusannmei h2,
.project-hero.alt-liusannmei small{text-shadow:1px 1px 3px rgba(42,15,74,.7)}

/* ===== Liusannmei Gallery ===== */
.liusannmei-section{margin-top:14px}
.liusannmei-gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:10px}
.liusannmei-gallery-item{padding:8px;background:#fff;border:1px solid #c5d6ef;border-radius:4px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.liusannmei-gallery-item:hover{border-color:#6a3fa0;box-shadow:0 2px 10px rgba(106,63,160,.2)}
.liusannmei-gallery-item:hover h5{color:#5a2f90}
.liusannmei-img-wrap{width:100%;min-height:180px;max-height:280px;display:flex;align-items:center;justify-content:center;background:#f5f0fa;border:1px solid #e0d5f0;border-radius:3px;cursor:pointer;overflow:hidden;transition:border-color .15s,background .15s}
.liusannmei-img-wrap:hover{border-color:#8b5fc5;background:#efe8f8}
.liusannmei-img-wrap img{width:100%;height:100%;max-height:270px;object-fit:contain;display:block;transition:transform .2s}
.liusannmei-img-wrap:hover img{transform:scale(1.02)}
.liusannmei-img-info{margin-top:8px;padding:0 2px}
.liusannmei-img-info h5{margin:0 0 4px;font-size:12px;color:#5a2f90;font-weight:600}
.liusannmei-img-info p{margin:0;font-size:11px;color:#666;line-height:1.5}

/* ===== Liusannmei Modal Lightbox ===== */
.liusannmei-modal-overlay{display:flex;align-items:center;justify-content:center;background:rgba(20,10,40,.92);backdrop-filter:blur(4px)}
.liusannmei-modal-content{position:relative;max-width:90vw;max-height:85vh;display:flex;flex-direction:column;align-items:center;gap:10px}
.liusannmei-modal-img{max-width:90vw;max-height:75vh;object-fit:contain;border:4px solid #fff;border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 60px rgba(139,95,197,.3);display:block}
.liusannmei-modal-caption{text-align:center;color:#fff;max-width:70vw}
.liusannmei-modal-caption b{display:block;font-size:14px;font-weight:600;margin-bottom:4px}
.liusannmei-modal-caption p{margin:0;font-size:12px;color:#d0c0e8;line-height:1.5}
.liusannmei-modal-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;display:grid;place-items:center;font-size:28px;color:#fff;background:rgba(106,63,160,.6);border:2px solid rgba(255,255,255,.5);border-radius:50%;cursor:pointer;z-index:10;transition:background .15s,transform .1s}
.liusannmei-modal-nav:hover{background:rgba(139,95,197,.9)}
.liusannmei-modal-nav:active{transform:translateY(-50%) scale(.92)}
.liusannmei-modal-nav.prev{left:24px}
.liusannmei-modal-nav.next{right:24px}
.liusannmei-modal-close{position:absolute;top:20px;right:24px;width:40px;height:40px;display:grid;place-items:center;font-size:24px;color:#fff;background:rgba(106,63,160,.6);border:2px solid rgba(255,255,255,.5);border-radius:50%;cursor:pointer;z-index:10;transition:background .15s,transform .1s}
.liusannmei-modal-close:hover{background:rgba(200,60,60,.8)}
.liusannmei-modal-close:active{transform:scale(.92)}

/* ===== Liusannmei Responsive ===== */
@media(max-width:720px){
  .liusannmei-gallery-grid{grid-template-columns:1fr}
  .liusannmei-img-wrap{min-height:160px;max-height:240px}
  .liusannmei-img-wrap img{max-height:230px}
  .liusannmei-modal-nav{width:40px;height:40px;font-size:22px}
  .liusannmei-modal-nav.prev{left:8px}
  .liusannmei-modal-nav.next{right:8px}
  .liusannmei-modal-close{top:12px;right:12px;width:36px;height:36px;font-size:20px}
  .liusannmei-modal-caption{max-width:85vw}
  .liusannmei-modal-img{max-width:92vw;max-height:70vh}
}

/* ===== Photography Project ===== */
.project-hero.alt-photography{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 40%,#0f3460 70%,#533483 100%)}
.project-hero.alt-photography h2,
.project-hero.alt-photography small{text-shadow:1px 1px 3px rgba(0,0,0,.7)}

/* Photo category filter bar */
.photo-cat-bar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px;padding:10px 12px;background:#f5f7fa;border:1px solid #d0d7e2;border-radius:4px}
.photo-cat-btn{padding:6px 14px;font-size:12px;background:#fff;border:1px solid #c5d6ef;border-radius:3px;cursor:pointer;transition:all .15s}
.photo-cat-btn:hover{border-color:#533483;color:#533483}
.photo-cat-btn.active{background:#533483;color:#fff;border-color:#533483}

/* Photo gallery - masonry columns */
.photo-gallery{columns:3;column-gap:12px}
.photo-card{break-inside:avoid;margin-bottom:12px;background:#fff;border:1px solid #d0d7e2;border-radius:4px;overflow:hidden;cursor:pointer;transition:all .15s}
.photo-card:hover{border-color:#533483;box-shadow:0 4px 16px rgba(83,52,131,.2);transform:translateY(-2px)}
.photo-img-wrap{width:100%;display:flex;align-items:center;justify-content:center;background:#f0f2f5}
.photo-img-wrap img{width:100%;height:auto;display:block;object-fit:contain}
.photo-card-info{padding:8px 10px;border-top:1px solid #e8ecf2}
.photo-card-info span{font-size:11px;color:#888}
.photo-card-info b{display:block;font-size:12px;color:#333;margin-top:2px;font-weight:500}

/* Photo modal */
.photo-modal-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(10,10,20,.95);backdrop-filter:blur(6px)}
.photo-modal-content{position:relative;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:12px}
.photo-modal-img{max-width:90vw;max-height:78vh;object-fit:contain;border:3px solid #fff;border-radius:2px;box-shadow:0 10px 60px rgba(0,0,0,.6)}
.photo-modal-caption{text-align:center;color:#fff;max-width:70vw}
.photo-modal-caption b{display:block;font-size:14px;font-weight:500;margin-bottom:3px}
.photo-modal-caption span{font-size:11px;color:#999}
.photo-modal-close{position:absolute;top:-20px;right:-20px;width:40px;height:40px;display:grid;place-items:center;font-size:20px;color:#fff;background:rgba(83,52,131,.8);border:2px solid rgba(255,255,255,.4);border-radius:50%;cursor:pointer;z-index:10;transition:all .15s}
.photo-modal-close:hover{background:rgba(200,50,50,.9);transform:scale(1.08)}
.photo-modal-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;display:grid;place-items:center;font-size:26px;color:#fff;background:rgba(83,52,131,.7);border:2px solid rgba(255,255,255,.4);border-radius:50%;cursor:pointer;z-index:10;transition:all .15s;user-select:none}
.photo-modal-nav:hover{background:rgba(83,52,131,.95);transform:translateY(-50%) scale(1.08)}
.photo-modal-nav:active{transform:translateY(-50%) scale(.95)}
.photo-modal-nav.prev{left:-70px}
.photo-modal-nav.next{right:-70px}

/* Photo gallery section heading */
.photo-gallery-section h4{margin:0 0 8px;font-size:16px;color:#333}

/* Photography Responsive */
@media(max-width:1024px){
  .photo-gallery{columns:2}
}
@media(max-width:640px){
  .photo-gallery{columns:1}
  .photo-modal-nav{width:38px;height:38px;font-size:20px}
  .photo-modal-nav.prev{left:8px}
  .photo-modal-nav.next{right:8px}
  .photo-modal-close{top:8px;right:8px}
  .photo-cat-btn{padding:5px 10px;font-size:11px}
}

/* 作品集网站项目 */
.portfolio-concept-section h4,
.portfolio-features-section h4,
.portfolio-process-section h4,
.portfolio-demo-section-wrap h4{margin:0 0 8px;font-size:16px;color:#333}
.portfolio-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.portfolio-feature-item{display:flex;gap:12px;align-items:flex-start;padding:14px}
.pf-icon{font-size:28px;flex:none;line-height:1}
.pf-body{flex:1;min-width:0}
.pf-body b{display:block;font-size:13px;color:#164a91;margin-bottom:4px}
.pf-body p{margin:0;font-size:12px;line-height:1.6;color:#555}
.portfolio-process-timeline{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.pf-step{padding:12px 14px}
.pf-step b{display:block;font-size:13px;color:#164a91;margin-bottom:6px}
.pf-step p{margin:0;font-size:12px;line-height:1.6;color:#555}
.portfolio-demo-section{padding:20px;text-align:center;margin-top:12px}
.portfolio-demo-section h5{margin:0 0 8px;font-size:15px;color:#164a91}
.portfolio-demo-section p{margin:0 0 14px;font-size:12px;color:#666}
.portfolio-demo-btn{padding:10px 24px;font-size:14px}
@media (max-width:768px){
  .portfolio-feature-grid{grid-template-columns:1fr}
  .portfolio-process-timeline{grid-template-columns:1fr}
}

/* 网站演示视频弹窗 */
.portfolio-demo-overlay .portfolio-demo-modal{min-width:min(900px,92vw);max-width:95vw;max-height:90vh;background:#fff;border:2px solid #fff;border-right-color:#808080;border-bottom-color:#808080;box-shadow:0 6px 40px #0008;display:flex;flex-direction:column}
.portfolio-demo-overlay .pdm-head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:linear-gradient(#0058e6,#3d95ff);color:#fff;border-bottom:1px solid #0a3d91}
.portfolio-demo-overlay .pdm-head b{font-size:13px;text-shadow:1px 1px #00000040}
.portfolio-demo-overlay .pdm-head .case-modal-close{width:22px;height:20px;display:grid;place-items:center;font-size:14px;color:#fff;background:linear-gradient(#e87d5f,#c94a2e);border:1px solid #fff;border-right-color:#8b3a20;border-bottom-color:#8b3a20;border-radius:2px;cursor:pointer;font-weight:700;line-height:1;padding:0}
.portfolio-demo-overlay .pdm-head .case-modal-close:active{border-color:#8b3a20;border-right-color:#fff;border-bottom-color:#fff}
.portfolio-demo-overlay .pdm-body{padding:4px;background:#000;display:flex;align-items:center;justify-content:center}
.portfolio-demo-overlay .pdm-body video{max-width:100%;max-height:calc(90vh - 40px);width:auto;height:auto;display:block}
@media (max-width:640px){
  .portfolio-demo-overlay .portfolio-demo-modal{min-width:auto;width:95vw}
  .portfolio-demo-overlay .pdm-body video{max-width:100%;max-height:75vh}
}