/* Desktop chrome measured from dekidsocool.com; content remains Wenli's. */
.page-home{--surface:#e0e0e0;--paper:#f4f4f4;--ink:#121212;--muted:#676767;--line:#00000014;--accent:#dfff68;background:var(--surface);color:var(--ink)}
.desktop-chrome{position:fixed;inset:16px 16px auto;z-index:30;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.desktop-chrome a,.desktop-chrome button{pointer-events:auto}.all-projects{display:flex;align-items:center;gap:8px;border-radius:40px;background:#ffffff52;padding:8px 16px 8px 8px;font-size:18px;font-weight:500;letter-spacing:-.18px;box-shadow:inset 0 0 0 1px #ffffff59;transition:background .2s}.all-projects:hover{background:#ffffff80}.all-projects .eye{height:32px;width:32px;border:6px solid white;background:#dfff68;box-shadow:inset -2px -2px 4px #0000001f}.all-projects .eye:after{width:12px;height:12px;left:4px;top:4px;transform:none;background:#000}.nav-arrow{width:0;overflow:hidden;opacity:0;transition:width .2s,opacity .2s}.all-projects:hover .nav-arrow{width:20px;opacity:1}.desktop-utilities{display:flex;align-items:center;gap:24px;font-size:14px;height:48px}.desktop-utilities time{font-variant-numeric:tabular-nums}.desktop-utilities a{display:flex;align-items:center;min-height:44px}.sound-toggle{display:flex;align-items:center;gap:8px;background:none;padding:0;min-height:44px;font-size:14px}.sound-switch{display:block;width:32px;height:20px;border-radius:20px;background:#0000001f;padding:3px;box-shadow:inset 0 1px 2px #0000000a}.sound-switch:after{content:'';display:block;width:14px;height:14px;border-radius:50%;background:white;box-shadow:0 1px 3px #0002;transition:transform .2s}.sound-toggle[aria-pressed=true] .sound-switch{background:#b8cb64}.sound-toggle[aria-pressed=true] .sound-switch:after{transform:translateX(12px)}
.desktop-headline{position:fixed;left:16px;top:80px;width:521px;z-index:20;pointer-events:none;font-size:32px;font-weight:500;line-height:1.25;letter-spacing:-.64px;color:white;mix-blend-mode:difference}.canvas-viewport{height:100svh;width:100%;scroll-padding:0;touch-action:pan-x pan-y}.canvas-plane{width:2200px;height:1400px}.glass-window{background:#ffffff73;box-shadow:inset 0 0 0 1px #ffffff8c;border:0;border-radius:24px;padding:8px 8px 16px}.panel-caption{height:44px;padding:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(#0000000f,#00000005);box-shadow:inset 0 0 0 1px #ffffff59;border:0;border-radius:16px;font-size:14px;font-weight:500;letter-spacing:-.14px;white-space:nowrap}.profile-panel{left:1050px;top:185px;width:358px;scroll-margin:0}.profile-body{padding:24px 16px 0}.profile-avatar{height:80px;width:80px;margin:0 auto 12px;background:#242424;color:#dfff68;font-size:48px;box-shadow:inset 0 0 0 1px #ffffff40}.profile-body h2{font-size:20px;font-weight:600;margin:0 0 4px;line-height:1.25}.profile-body p{font-size:14px;line-height:1.5;letter-spacing:-.14px}.profile-body .profile-role{margin-bottom:16px}.profile-skills{border:0;margin-top:24px;padding:0;gap:20px;font-size:12px;line-height:1.4}.profile-skills span{display:flex;flex-direction:column;align-items:center;gap:6px}.profile-skills b{font-size:22px;color:#444;line-height:28px;font-weight:500}.recent-panel{position:absolute;left:580px;top:260px;width:355px;height:168px}.recent-apps{display:flex;justify-content:space-between;padding:24px 8px 0;gap:12px}.recent-apps button{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;padding:0;width:64px;font-size:14px;line-height:20px}.app-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:11px;box-shadow:inset 0 1px 1px #ffffff70,0 2px 3px #00000014;font-size:34px;font-weight:600;line-height:1;transition:transform .2s var(--ease)}.icon-signal{background:#1c2925;color:#dfff68}.icon-frame{background:#fa673f;color:#fff7f0;font-family:Georgia,serif;font-style:italic}.icon-insights{background:#edbce9;color:#482f57}.icon-pulse{background:#b1c7f9;color:#23366c}.recent-apps button:hover .app-icon{transform:translateY(-4px)}
.canvas-project{transition:transform .2s var(--ease)}.canvas-project:hover{transform:scale(1.015)}.position-0{left:600px;top:550px;width:355px}.position-1{left:160px;top:350px;width:297px}.position-2{left:1090px;top:760px;width:355px}.position-3{left:1580px;top:550px;width:297px}.project-frame{padding:8px;border-radius:24px;background:#ffffff73;box-shadow:inset 0 0 0 1px #ffffff8c}.project-art{border:0;border-radius:16px;aspect-ratio:339/191;box-shadow:0 4px 6px -4px #0000001a,0 10px 15px -3px #0000001a}.canvas-project:hover .project-art{transform:none}.position-1 .project-art,.position-3 .project-art{aspect-ratio:1.22}.project-caption{padding:8px 0 0;line-height:20px;letter-spacing:-.14px}.project-caption h2{font-size:14px;line-height:20px;font-weight:500;gap:0;position:relative}.project-caption h2>span{position:absolute;right:16px}.project-caption p{font-size:14px;margin:4px 0 0}.project-stage{font-size:11px;color:#676767}.concept-label{font-size:7px;bottom:6px;left:10px;letter-spacing:.05em;opacity:.65}.art-signal{background:#161e1b}.mock-browser{background:#f5f6f3;transform:rotate(-6deg);left:10%;top:15%;width:86%;color:#18221e}.mock-title em{color:#526c40}.mock-board>div{background:#e8ece4}.art-frame{background:#f86b45;color:#31130f}.frame-sheet{background:#f4f2e9}.frame-paper{background:#ddf5ad}.annotation{background:#d0e9fb}.art-insights{background:#dfc0e9;color:#382344}.insight-sheet{background:#faf5fc}.chart-lines i{background:#856590}.art-pulse{background:#a9c0ee;color:#24355b}.flow-screen{background:#f4f7ff;border-color:#ffffff80}.flow-screen.second{background:#243760;color:#e9efff}.flow-dot{background:#d9ee9c}.flow-disc{color:#5374ad}.desk-note{left:1620px;top:130px;width:240px;transform:none}.note-paper{position:relative;min-height:250px;padding:24px 12px 16px;overflow:hidden}.note-paper>span{font-size:10px;letter-spacing:.06em}.note-paper p{font:italic 25px/1.2 Georgia,serif;margin:24px 0 20px}.note-doodle{font-size:100px;line-height:1;text-align:right;opacity:.8;margin:12px 0 -16px}.canvas-signature{left:590px;top:1120px;font-size:24px;color:#676767}.canvas-help{bottom:104px;font-size:11px;background:#e0e0e0c9;padding:4px 10px}.visual-map{bottom:16px;left:16px;width:300px;padding:8px;background:#ffffffa3;border:0;border-radius:12px;box-shadow:inset 0 1px #ffffff8c,inset 0 -1px #0000000d;backdrop-filter:blur(20px)}.visual-map summary{font-size:18px;font-weight:500;letter-spacing:-.18px;min-height:36px}.visual-map summary>span:first-child{gap:4px}.map-symbol{font-size:28px;width:32px;text-align:center;font-weight:400;line-height:32px}.map-chevron{font-size:20px;margin-right:4px}.visual-map:not([open]) .map-chevron{transform:rotate(180deg)}.map-surface{width:284px;height:151px;margin-top:4px;background:transparent;border-radius:8px}.map-item,.map-profile,.map-recent{position:absolute;min-height:0;border:0;border-radius:2px;background:#00000029;font-size:0}.map-item{z-index:2;transition:background .2s}.map-item:hover,.map-item:focus-visible{background:#6d7860}.map-view{background:#00000005;border:1px solid #12121270;border-radius:3px}.dock{bottom:16px;gap:12px;padding:10px;border-radius:20px;background:#ffffff3d;border:0;box-shadow:inset 0 1px #ffffff8c,inset 0 -1px #0000000d;backdrop-filter:blur(20px) saturate(180%)}.dock-item{position:relative;min-width:48px;height:48px;padding:0;background:none}.dock-item img,.dock-item>span:first-child{width:48px;height:48px;object-fit:contain;transition:transform .2s var(--ease)}.dock-item:hover img,.dock-item:hover>span:first-child,.dock-item:focus-visible>span:first-child{transform:translateY(-6px) scale(1.08)}.dock-tooltip{position:absolute;bottom:62px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;line-height:20px;background:#ffffffe6;border:1px solid #ffffff80;padding:4px 10px;border-radius:8px;opacity:0;pointer-events:none;box-shadow:0 3px 8px #0001;transition:opacity .15s}.dock-item:hover .dock-tooltip,.dock-item:focus-visible .dock-tooltip{opacity:1}.dock-separator{height:36px;background:#0000001f;margin:0 2px}.reset-icon{display:grid;place-items:center;background:linear-gradient(#fcfcfc,#d2d2d2);border-radius:12px;font-size:38px;color:#515151;box-shadow:inset 0 0 0 1px #ffffff80}.computer-icon{display:grid;place-items:center;background:linear-gradient(#383838,#181818);border:4px solid #f1f1f1;border-bottom-width:10px;border-radius:8px;color:#bccf8c;font-size:28px;box-shadow:0 2px 3px #0002}
@media(min-width:1500px){.canvas-plane{width:2200px}}
@media(max-width:1000px) and (min-width:721px){.desktop-utilities{gap:16px}.desktop-utilities time{display:none}.dock{left:auto;right:16px;transform:none;gap:8px}.dock-item,.dock-item img,.dock-item>span:first-child{width:40px;height:40px;min-width:40px}.dock-item{height:40px}.visual-map{width:230px}.map-surface{width:214px;height:136px}}
@media(max-width:720px){.page-home{overflow:auto}.desktop-chrome{inset:12px 12px auto}.all-projects{font-size:16px;padding:6px 12px 6px 6px}.desktop-utilities{gap:0}.desktop-utilities time,.sound-toggle{display:none}.desktop-utilities a{font-size:12px}.desktop-headline{position:relative;top:auto;left:auto;width:auto;margin:84px 20px 28px;font-size:clamp(23px,5.8vw,32px);line-height:1.3}.canvas-viewport{height:auto;overflow:visible;width:auto}.canvas-plane{width:auto;height:auto;display:flex;flex-direction:column;align-items:stretch;padding:0 20px 140px;gap:32px}.recent-panel,.profile-panel,.canvas-project,.desk-note,.canvas-signature{position:relative;left:auto;top:auto;width:100%;max-width:420px;align-self:center}.recent-panel{order:0;height:168px}.canvas-project{order:1}.position-1{order:2}.position-2{order:3}.position-3{order:4}.profile-panel{order:5;scroll-margin-top:80px}.desk-note{order:6;margin:0}.canvas-signature{order:7;font-size:20px;margin:0}.profile-body{padding:24px 16px 0}.project-caption{padding:8px 0 0}.project-art{border:0;border-radius:16px}.visual-map{display:block;bottom:88px;left:12px;width:160px;padding:6px}.visual-map summary{font-size:13px;min-height:32px}.map-symbol{font-size:22px;width:24px}.map-surface{width:148px;height:94px}.dock{width:max-content;max-width:calc(100% - 24px);bottom:12px;gap:9px;padding:9px;border-radius:18px}.dock-item,.dock-item img,.dock-item>span:first-child{width:34px;height:34px;min-width:34px}.dock-item{height:34px}.dock .app-icon{font-size:25px;border-radius:8px}.dock-separator{height:28px;margin:0}.dock .reset-canvas{display:none}.reset-icon{font-size:28px}.computer-icon{font-size:18px;border-width:3px;border-bottom-width:7px}.dock-tooltip{bottom:48px}.canvas-help{display:none}.recent-apps{padding-left:12px;padding-right:12px}.map-chevron{font-size:16px}.profile-skills{font-size:12px}}
@media(max-width:380px){.dock{gap:6px}.dock-item,.dock-item img,.dock-item>span:first-child{width:32px;height:32px;min-width:32px}}

/* Keep the reference's scattered desk proportions within the first view. */
@media(min-width:721px){
 .profile-panel{left:930px;top:150px}
 .recent-panel{left:510px;top:230px}
 .position-0{left:500px;top:440px}
 .position-1{left:105px;top:265px}
 .position-2{left:985px;top:655px}
 .position-3{left:1470px;top:470px}
 .desk-note{left:1450px;top:105px}
}

/* Ten project positions, with space for the desktop objects between them. */
@media(min-width:721px){
 .canvas-plane{width:3200px;height:2100px}
 .position-0{left:540px;top:520px}
 .position-1{left:110px;top:320px}
 .position-2{left:1070px;top:740px}
 .position-3{left:1580px;top:850px}
 .position-4{left:220px;top:970px;width:355px}
 .position-5{left:700px;top:1250px;width:297px}
 .position-6{left:1210px;top:1480px;width:355px}
 .position-7{left:2100px;top:720px;width:355px}
 .position-8{left:2600px;top:350px;width:297px}
 .position-9{left:2510px;top:1270px;width:355px}
 .desk-note{left:2030px;top:160px}
 .music-player{left:1540px;top:180px}
 .canvas-signature{left:1880px;top:1760px}
}
.pending-project{cursor:default}.pending-project:hover{transform:none}.pending-cover{aspect-ratio:339/210;border-radius:16px;display:flex;flex-direction:column;justify-content:space-between;padding:20px 24px;background:#c6cbd2;color:#414c5b;overflow:hidden}.pending-cover>span{font-size:9px;letter-spacing:.12em}.pending-cover b{font:italic 88px/1 Georgia,serif;align-self:center;letter-spacing:-.08em;font-weight:400}.pending-1{background:#dfd3c4;color:#675242}.pending-2{background:#c9d4c8;color:#425d4e}.pending-3{background:#d2cbe0;color:#55476e}.pending-4{background:#c8d8dd;color:#3e6069}.pending-5{background:#e0cacd;color:#705052}.map-music,.map-note{position:absolute;min-height:0;background:#00000029;border-radius:2px;padding:0}.map-music{z-index:2}.music-player{position:absolute;width:240px;padding:8px 8px 16px;background:#ffffffa3;border-radius:24px;display:flex;flex-direction:column;align-items:center;gap:12px;isolation:isolate}.player-screen{width:224px;height:168px;border-radius:18px;background:#00000014;padding:4px;overflow:hidden}.player-header{height:24px;display:flex;align-items:center;justify-content:space-between;border-radius:14px;background:#f4f4f4;padding:2px 7px;font-size:12px;line-height:18px}.player-battery{width:16px;height:10px;border:1px solid #222;position:relative}.player-battery:after{content:'';position:absolute;inset:1px;background:#222}.album-stack{position:relative;height:112px;perspective:600px}.album-cover{position:absolute;padding:0;left:50%;top:50%;width:100px;height:100px;border-radius:4px;overflow:hidden;background:none;box-shadow:0 4px 7px #0002;transition:transform .3s var(--ease),opacity .3s}.album-cover img{width:100%;height:100%;object-fit:cover}.album-current{transform:translate(-50%,-50%);z-index:3}.album-left{transform:translate(-110%,-50%) scale(.72) rotateY(28deg);opacity:.65;z-index:1}.album-right{transform:translate(10%,-50%) scale(.72) rotateY(-28deg);opacity:.65;z-index:1}.album-current:hover{transform:translate(-50%,-50%) scale(1.025)}.player-now{display:flex;justify-content:space-between;padding:0 8px;font-size:9px;line-height:16px;color:#555;font-variant-numeric:tabular-nums}.is-playing .player-now{color:#121212}.is-playing .player-now>span:first-child:before{content:'♪ ';color:#536d43}.click-wheel{width:192px;height:192px;background:#0000000a;border-radius:50%;position:relative}.click-wheel button{position:absolute;background:none;padding:0;display:grid;place-items:center;color:#181818;min-height:44px;min-width:44px;font-size:13px}.click-wheel .wheel-menu{top:4px;left:50%;transform:translateX(-50%);font-size:14px;color:#676767}.wheel-prev{left:4px;top:74px;letter-spacing:-5px;padding-right:5px!important}.wheel-next{right:4px;top:74px;letter-spacing:-5px;padding-right:5px!important}.wheel-play{bottom:4px;left:74px;letter-spacing:-2px}.click-wheel .wheel-center{width:80px;height:80px;background:white;box-shadow:0 7px 9px #00000018;left:56px;top:56px;border-radius:50%;transition:transform .15s,box-shadow .15s}.wheel-center:active{transform:scale(.97);box-shadow:0 3px 5px #00000014}.click-wheel button:focus-visible{outline:2px solid #777;outline-offset:1px;border-radius:50%}.player-menu{position:absolute;top:40px;left:16px;right:16px;z-index:5;background:#f7f7f7f5;border-radius:12px;padding:10px;box-shadow:0 5px 15px #0002}.player-menu[hidden]{display:none}.player-menu p{font-size:11px;margin-bottom:6px;color:#676767}.player-menu button{display:block;min-height:36px;background:none;width:100%;text-align:left;border-radius:6px;font-size:12px;padding:4px 8px}.player-menu button:hover,.player-menu button[aria-current=true]{background:#ddd}.player-message{font-size:11px;line-height:1.4;color:#974327;text-align:center}.player-message:empty{display:none}.music-icon{display:grid;place-items:center;background:linear-gradient(#fb6384,#dc3159);color:white;border-radius:11px;font-size:32px;box-shadow:inset 0 1px #fff8}
@media(max-width:720px){
 .canvas-plane{gap:48px}.music-player{position:relative;left:auto;top:auto;align-self:center;order:1;scroll-margin-top:90px}.canvas-project{order:2}.profile-panel{order:3}.desk-note{order:4}.canvas-signature{order:5}
 .desktop-utilities{gap:8px}.desktop-utilities .sound-toggle{display:flex;font-size:12px}.desktop-utilities>a{display:none}.dock{gap:7px}.dock .reset-canvas,.dock>a:last-child{display:none}.dock .music-icon{font-size:24px}
}
/* Vector controls keep their centers stable across fonts and zoom levels. */
.click-wheel .wheel-prev,.click-wheel .wheel-next,.click-wheel .wheel-play{width:44px;height:44px;padding:0!important;letter-spacing:normal;line-height:1}
.click-wheel svg{display:block;width:18px;height:18px;fill:currentColor;pointer-events:none}
.click-wheel .wheel-play svg{width:20px;height:20px}
.click-wheel .wheel-prev{left:4px;top:50%;transform:translateY(-50%)}
.click-wheel .wheel-next{right:4px;top:50%;transform:translateY(-50%)}
.click-wheel .wheel-play{left:50%;bottom:4px;transform:translateX(-50%)}
.click-wheel button:hover{color:#555}.click-wheel button:active svg{transform:scale(.9)}