:root{--text-primary: #111111;--text-secondary: #3f3f3f;--surface: #ffffff;--surface-soft: #f6f6f6;--surface-muted: rgba(255, 255, 255, .82);--border: #d9d9d9;--bg-body: #f7f6f2;--app-gradient: radial-gradient(circle at 8% 8%, rgba(255, 255, 255, .85), rgba(247, 246, 242, .7) 32%, rgba(247, 246, 242, .95) 70%), linear-gradient(140deg, #f8f7f3 0%, #f3f1eb 100%);--nav-bg: rgba(255, 255, 255, .92);--shadow-soft: rgba(123, 122, 118, .18);--toggle-shell: rgba(255, 255, 255, .32);--toggle-core: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(233, 230, 226, .78));--toggle-halo: rgba(255, 255, 255, .8);--toggle-arc: rgba(255, 255, 255, .92);--toggle-arc-glow: transparent;--toggle-icon: #313131;--toggle-icon-muted: rgba(240, 142, 76, .9);--toggle-shadow-drop: rgba(0, 0, 0, .16);--toggle-shadow-glow: rgba(255, 255, 255, .18);--button-strong-bg: #111111;--button-strong-text: #ffffff;--focus-outline: #111111}:root[data-theme=dark]{--text-primary: #eef2ff;--text-secondary: #b7c0d6;--surface: #202a46;--surface-soft: #1b233a;--surface-muted: rgba(31, 42, 70, .82);--border: rgba(138, 156, 212, .24);--bg-body: #141a2d;--app-gradient: radial-gradient(circle at 12% 10%, rgba(107, 95, 181, .28), rgba(20, 26, 45, 0) 34%), radial-gradient(circle at 82% 16%, rgba(230, 88, 186, .12), rgba(20, 26, 45, 0) 28%), linear-gradient(145deg, #18213a 0%, #101729 100%);--nav-bg: rgba(24, 33, 58, .78);--shadow-soft: rgba(5, 10, 24, .55);--toggle-shell: rgba(126, 91, 192, .18);--toggle-core: linear-gradient(145deg, rgba(85, 78, 139, .92), rgba(53, 44, 92, .82));--toggle-halo: rgba(207, 186, 255, .35);--toggle-arc: rgba(255, 255, 255, .88);--toggle-arc-glow: transparent;--toggle-icon: #f3f4ff;--toggle-icon-muted: rgba(240, 130, 255, .94);--toggle-shadow-drop: rgba(14, 8, 38, .42);--toggle-shadow-glow: rgba(216, 118, 255, .38);--button-strong-bg: #eff2ff;--button-strong-text: #141c32;--focus-outline: #eff2ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:var(--text-primary);background-color:var(--bg-body);transition:background-color .45s ease,color .45s ease}html,body,#root{min-height:100%}a{color:inherit;text-decoration:none}.app-shell{position:relative;min-height:100vh;background:var(--app-gradient);isolation:isolate}.page-content{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:20px 24px 44px}.top-chrome{top:12px;z-index:30;display:flex;position:sticky;justify-content:center;align-items:center;gap:10px;min-height:72px;padding:8px 14px;margin-bottom:30px;isolation:isolate}.top-chrome:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background:color-mix(in srgb,var(--bg-body) 78%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 12px 28px #00000014,inset 0 1px #ffffff6b;z-index:-1;pointer-events:none}.nav-wrap{position:relative}.nav{width:fit-content;margin:0 auto;display:flex;gap:10px;padding:8px;border:1px solid var(--border);border-radius:999px;background:var(--nav-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.theme-toggle{position:relative;width:56px;height:56px;padding:0;border:0;background:transparent;cursor:pointer;flex:0 0 56px;align-self:center}.theme-toggle:before{content:none}.theme-toggle:after{content:none}.theme-toggle-track{position:absolute;top:0;right:0;bottom:0;left:0;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;pointer-events:none}.theme-toggle-glow{display:none}.theme-toggle-thumb{position:absolute;top:0;left:0;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:var(--toggle-core);box-shadow:0 8px 18px var(--toggle-shadow-drop),0 0 18px var(--toggle-shadow-glow),inset 0 1px #ffffffc7,inset 0 -6px 10px #6c6b7029;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:none;transition:top .45s cubic-bezier(.23,1,.32,1),left .45s cubic-bezier(.23,1,.32,1),background .45s ease}.theme-toggle.is-dark .theme-toggle-thumb{top:16px;left:16px}.theme-toggle.is-light .theme-toggle-thumb{top:0;left:0}.theme-icon{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none;transition:opacity .35s ease,transform .45s ease}.theme-icon span{display:block}.sun-icon span{width:12px;height:12px;border-radius:50%;border:2px solid var(--toggle-icon);box-shadow:0 -7px 0 -5px var(--toggle-icon),0 7px 0 -5px var(--toggle-icon),7px 0 0 -5px var(--toggle-icon),-7px 0 0 -5px var(--toggle-icon),5px 5px 0 -5px var(--toggle-icon),-5px 5px 0 -5px var(--toggle-icon),5px -5px 0 -5px var(--toggle-icon),-5px -5px 0 -5px var(--toggle-icon)}.moon-icon span{width:12px;height:12px;border-radius:50%;background:transparent;box-shadow:4px -2px 0 0 var(--toggle-icon)}.theme-toggle.is-light .sun-icon{opacity:1;transform:scale(1) rotate(0)}.theme-toggle.is-light .moon-icon{opacity:0;transform:scale(.6) rotate(-40deg)}.theme-toggle.is-dark .sun-icon{opacity:0;transform:scale(.6) rotate(40deg)}.theme-toggle.is-dark .moon-icon{opacity:1;transform:scale(1) rotate(0)}.nav-item{padding:8px 14px;border-radius:999px;font-size:14px;border:1px solid transparent;background:transparent;color:inherit;cursor:pointer}.nav-item:hover{border-color:var(--border)}.nav-item.active{background:var(--button-strong-bg);color:var(--button-strong-text)}.page-section{min-height:90vh;scroll-margin-top:110px;display:grid;align-content:center;padding:22px 0 28px}#home.page-section,#about.page-section{min-height:100vh}#about-start,#experience-start,#skills-start,#projects-start,#design-start,#contact-start{scroll-margin-top:110px}.hero{display:grid;grid-template-columns:minmax(320px,560px) minmax(260px,1fr);align-items:center;gap:32px}.about{display:grid;grid-template-columns:minmax(320px,560px) minmax(260px,1fr);align-items:center;gap:24px}.hero-left,.about-left{max-width:560px}.badge{display:inline-flex;align-items:center;justify-content:center;width:fit-content;min-width:0;height:40px;padding:0 22px;border-radius:999px;border:1px solid var(--border);background:var(--surface-muted);color:var(--text-primary);font-size:14px;font-weight:500;letter-spacing:0;line-height:1;text-align:center;white-space:nowrap;margin-bottom:22px}h1{margin:0;font-size:clamp(38px,4.4vw,60px);line-height:1.02;letter-spacing:-.02em}h2{margin:18px 0 14px;font-size:clamp(28px,2.7vw,38px);font-weight:700}h3{margin:0 0 10px;font-size:18px}.role-title{display:inline-block;color:#111}.hover-word{display:inline-block;white-space:nowrap}.hover-letter{display:inline-block;color:#111;transition:transform .25s ease,text-shadow .35s ease,filter .35s ease,color .35s ease}.hover-letter.range-0,.hover-letter.range-1,.hover-letter.range-2,.hover-letter.range-3{background-image:linear-gradient(120deg,#5f7de6,#8d6de0,#4eb8b6 68%,#f1ae62);background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}.hover-letter.range-0{text-shadow:0 0 18px rgba(123,134,240,.38);filter:saturate(1.15);transform:translateY(-1px)}.hover-letter.range-1{text-shadow:0 0 12px rgba(123,134,240,.3);filter:saturate(1.1)}.hover-letter.range-2{text-shadow:0 0 8px rgba(123,134,240,.24);filter:saturate(1.05)}.hover-letter.range-3{text-shadow:0 0 5px rgba(123,134,240,.18)}.letter-space{white-space:pre}.typing-name{display:inline-block;width:16ch;white-space:nowrap;overflow:hidden;color:#5f7de6;border-right:2px solid currentColor;animation:typing 3.2s steps(16,end) infinite alternate,caret .8s step-end infinite,name-color 3.2s linear infinite}.hero-left p,.about-left>p,.coming-soon p{margin:0;max-width:54ch;line-height:1.65;color:var(--text-secondary);font-size:16px}.meta-row{margin-top:18px;display:flex;flex-wrap:wrap;gap:14px;color:#2f2f2f;font-size:14px}.actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}.btn{padding:12px 18px;border-radius:999px;border:1px solid #202020;font-size:14px;font-weight:600}.btn-primary{background:var(--button-strong-bg);color:var(--button-strong-text)}.btn-secondary{background:var(--surface);color:var(--text-primary)}.social-wrap{margin-top:34px;padding-top:20px;border-top:1px solid var(--border);display:flex;gap:14px;align-items:center;flex-wrap:wrap}.social-label{color:#252525;font-size:15px}.social-links{display:flex;gap:10px}.social-link{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;color:#171717;text-decoration:none;background:var(--surface-muted);transition:transform .2s ease,background-color .2s ease,border-color .2s ease}.social-link:hover{transform:translateY(-2px);background:#fff;border-color:#111}.social-link svg{width:16px;height:16px}.hero-right,.about-right{display:flex}.hero-right{justify-content:flex-end;align-items:center;padding-left:18px}.hero-artwork{display:block;width:min(100%,420px);max-height:520px;object-fit:contain;filter:drop-shadow(0 30px 34px rgba(72,96,199,.18)) drop-shadow(-18px 10px 24px rgba(136,164,255,.16)) drop-shadow(22px 16px 28px rgba(232,168,255,.18))}.about-right{justify-content:center;align-items:flex-end}.robot-scene{position:relative;width:min(100%,460px);height:500px;display:grid;perspective:1000px;place-items:end center}.robot-shadow{position:absolute;bottom:42px;width:210px;height:34px;border-radius:50%;background:radial-gradient(circle,#12151c75,#12151c1a 70%,#12151c00)}.robot-body-wrap{position:relative;width:224px;height:360px;margin-bottom:52px;transform-style:preserve-3d;transform:perspective(900px) rotateY(-15deg) rotate(-2deg);animation:robot-idle 6.8s ease-in-out infinite}.robot-head{position:absolute;top:8px;left:50%;width:184px;height:144px;transform:translate(-50%) rotate(0);border-radius:48px;background:linear-gradient(180deg,#737986,#4b515c 72%,#3f444f);box-shadow:0 16px 22px #14182257,inset 0 2px 3px #cbd3e147,inset 0 -8px 10px #0c0e1438;transform-origin:50% 74%;animation:head-look 6.8s ease-in-out infinite}.robot-head:before,.robot-head:after{content:"";position:absolute;top:56px;width:18px;height:32px;border-radius:12px;background:linear-gradient(180deg,#8e95a3,#59606e);box-shadow:inset 0 -3px 6px #0d0f1440}.robot-head:before{left:-10px}.robot-head:after{right:-10px}.robot-antenna{position:absolute;top:-6px;width:7px;height:12px;border-radius:999px;background:linear-gradient(180deg,#8c92a0,#555b67)}.robot-antenna:after{display:none}.robot-antenna.left{left:46px}.robot-antenna.right{right:46px}.robot-face{position:absolute;top:20px;left:12px;right:12px;height:102px;border-radius:34px;background:linear-gradient(180deg,#ffffff0d,#fff0 40%),repeating-linear-gradient(-28deg,#ffffff0a 0,#ffffff0a 2px,#00000008 2px,#00000008 4px),#0d0f13;border:4px solid rgba(184,192,208,.32);overflow:hidden}.robot-eye{position:absolute;top:32px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fffbc5 0,#fffbc5 15%,#ffe75c 22%,#ffd400 75%);box-shadow:0 0 15px #ffd93380;animation:eye-look 6.8s ease-in-out infinite}.robot-eye.left{left:48px}.robot-eye.right{right:48px}.robot-mouth{position:absolute;left:50%;bottom:24px;width:28px;height:12px;transform:translate(-50%) rotate(0);border-radius:0 0 12px 12px;background:#ffd834;clip-path:ellipse(50% 65% at 50% 0%)}.robot-neck{position:absolute;top:146px;left:50%;width:34px;height:18px;transform:translate(-50%);border-radius:12px;background:linear-gradient(180deg,#575d69,#424853)}.robot-torso{position:absolute;top:162px;left:50%;width:120px;height:104px;transform:translate(-50%);border-radius:38px;background:linear-gradient(180deg,#4f5560,#2e323a);box-shadow:0 12px 18px #0d101659,inset 0 -6px 12px #0a0c114d}.torso-light{position:absolute;bottom:16px;width:18px;height:3px;border-radius:999px;background:#ffdc45eb;box-shadow:0 0 8px #ffdc458c}.torso-light.one{left:40px}.torso-light.two{left:58px}.torso-light.three{left:76px}.robot-arm{position:absolute;top:174px;width:28px;height:70px;border-radius:20px;background:linear-gradient(180deg,#505661,#2f343c);transform-origin:50% 10%;box-shadow:inset 0 -4px 8px #0a0c104d}.robot-arm.left{left:40px;transform:rotate(16deg)}.robot-arm.right{right:40px;transform:rotate(-14deg)}.robot-forearm{position:absolute;right:0;left:0;bottom:-34px;margin:auto;width:24px;height:38px;border-radius:16px;background:linear-gradient(180deg,#5a606c,#363b44)}.robot-hand{position:absolute;left:50%;bottom:-12px;width:20px;height:20px;transform:translate(-50%);border-radius:10px;background:linear-gradient(180deg,#505661,#2f343c);box-shadow:inset 0 -2px 4px #0a0c104d}.robot-legs{position:absolute;left:50%;bottom:0;width:136px;height:100px;transform:translate(-50%)}.robot-leg{position:absolute;bottom:0;width:54px;height:84px;border-radius:26px 26px 20px 20px;background:linear-gradient(180deg,#505661,#2b2f37);box-shadow:inset 0 -6px 10px #0a0c1052}.robot-leg.left{left:12px}.robot-leg.right{right:12px}.about{margin-top:6px}.about-grid{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.about-card{padding:16px;border:1px solid var(--border);border-radius:14px;background:#ffffffbf}.about-card p{margin:0;font-size:14px;color:#505050;line-height:1.5}.experience{display:grid;grid-template-columns:minmax(320px,480px) minmax(340px,1fr);align-items:start;gap:30px}.experience-left{max-width:480px}.experience-left h2{margin:0;font-size:clamp(38px,4.4vw,60px);line-height:1.02;letter-spacing:-.02em}.experience-summary{margin:12px 0 0;color:#4e5667;line-height:1.6;max-width:52ch}.experience-highlights{margin-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.experience-highlight{border:1px solid #d4dbe9;border-radius:16px;padding:12px;background:linear-gradient(180deg,#fffffff0,#ecf3ffe6);box-shadow:0 10px 14px #445a881a}.highlight-value{margin:0;font-size:20px;line-height:1;font-weight:800;color:#2f4c82}.highlight-label{margin:6px 0 0;font-size:12px;line-height:1.4;color:#5f6b86;font-weight:600}.experience-right{display:flex;justify-content:center}.experience-timeline{position:relative;width:min(100%,620px);display:grid;gap:12px;padding-left:26px}.experience-timeline:before{content:"";position:absolute;left:8px;top:2px;bottom:2px;width:2px;border-radius:999px;background:linear-gradient(180deg,#83a6ee,#97bbe8 44%,#bdd6ee)}.experience-card{position:relative;border:1px solid #d4dbe9;border-radius:20px;background:radial-gradient(circle at 85% 18%,#7ca2f038,#7ca2f000 38%),linear-gradient(180deg,#fff,#f2f7ff);padding:16px;box-shadow:0 12px 18px #4a5c881c;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.experience-card:hover{transform:translateY(-2px);border-color:#b9c9ea;box-shadow:0 16px 24px #4a5c882b}.experience-dot{position:absolute;left:-25px;top:22px;width:12px;height:12px;border-radius:50%;background:#5b86d8;box-shadow:0 0 0 4px #5b86d838}.experience-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.experience-card h3{margin:0;font-size:20px}.experience-company{margin:4px 0 0;color:#36548c;font-weight:700;font-size:14px}.experience-type{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid #bfcbec;background:#ebf1ff;color:#36528a;font-size:12px;font-weight:700}.experience-meta{margin:10px 0 0;display:flex;gap:14px;flex-wrap:wrap;color:#5b6884;font-size:13px;font-weight:600}.experience-impact{margin:10px 0 0;display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid #c9d5f1;background:#ffffffd9;color:#355182;font-size:12px;font-weight:700}.experience-focus{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}.experience-focus span{display:inline-flex;align-items:center;border:1px solid #d0dbef;border-radius:999px;padding:6px 10px;background:#fff;color:#475a84;font-size:12px;font-weight:700}.experience-points{margin:12px 0 0;padding-left:18px;display:grid;gap:5px;color:#46506a;font-size:14px;line-height:1.5}.skills{display:grid;grid-template-columns:minmax(340px,620px) minmax(280px,1fr);align-items:center;gap:24px}.skills-left{max-width:620px}.logo-grid{margin-top:26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.logo-tile{display:grid;justify-items:center;gap:10px}.logo-face{--tilt-y: 0deg;width:88px;height:88px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(160deg,#3e4976,#2b345f 60%,#202749);box-shadow:0 14px 20px #14182c4d,inset 0 1px #ffffff38;transform:perspective(380px) rotateX(16deg) rotateY(var(--tilt-y));transition:transform .16s linear,box-shadow .28s ease}.logo-tile p{margin:0;font-size:13px;color:#3a3a3a;font-weight:600;transition:transform .2s ease,letter-spacing .2s ease}.logo-icon{width:54px;height:54px}.logo-tile:hover .logo-face{transform:perspective(380px) rotateX(10deg) rotateY(var(--tilt-y)) translateY(-3px);box-shadow:0 18px 24px #14182c59,inset 0 1px #ffffff47}.logo-tile:hover p{transform:scale(1.08);letter-spacing:.01em}.tone-react .logo-face{background:linear-gradient(160deg,#55619a,#394577 60%,#2b355f)}.react-icon{fill:#79e6ff;stroke:#79e6ff;stroke-width:4;filter:drop-shadow(0 4px 8px rgba(121,230,255,.35))}.icon-js-bg{fill:#f5c447}.icon-node-bg{fill:#63b972}.icon-mongo-bg{fill:#5eb179}.icon-git-bg{fill:#ef7d58}.icon-python-top{fill:#4b8dde}.icon-python-bottom{fill:#f0c34b}.icon-dot-light{fill:#f4f7ff}.icon-dot-dark{fill:#243251}.icon-leaf-light{fill:#d8f4df}.icon-stroke-light{fill:none;stroke:#f4f7ff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.icon-stroke-dark{fill:none;stroke:#1d2547;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.tone-python .logo-face{background:linear-gradient(160deg,#355d9d,#294979 58%,#243d61)}.tone-selenium .logo-face{background:linear-gradient(160deg,#4c9d62,#3f8051 58%,#2f6040)}.tone-blender .logo-face{background:linear-gradient(160deg,#d57a2c,#b55f19 58%,#8e4812)}.icon-selenium-core{fill:#8fe3a2}.icon-selenium-node{fill:#d7ffe0}.icon-blender-core{fill:#f29b38}.icon-blender-center{fill:#dff3ff}.icon-blender-stroke{fill:none;stroke:#f29b38;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}.skills-right{position:relative;min-height:420px;display:grid;place-items:center}.projects{display:grid;grid-template-columns:minmax(320px,470px) minmax(340px,1fr);align-items:start;gap:28px}.projects-left{max-width:470px}.projects-left h2{margin:0;font-size:clamp(32px,3.2vw,42px);line-height:1.08}.projects-summary{margin:12px 0 0;color:#4c5568;line-height:1.6;max-width:52ch}.project-list{display:grid;gap:10px;margin-top:18px}.project-item{width:100%;border:1px solid #d3dae7;border-radius:14px;padding:12px 13px;background:linear-gradient(180deg,#f8fbff,#edf3fc);color:#2d3a54;text-align:left;display:flex;gap:10px;align-items:flex-start;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.project-item:hover{transform:translateY(-1px);border-color:#afc0e4}.project-item.active{border-color:#86a5e8;box-shadow:0 10px 16px #7d97d433}.project-item-label{display:grid;gap:2px}.project-item-label strong{font-size:14px}.project-item-label small{font-size:12px;color:#6d7690}.project-item-num{min-width:24px;font-size:12px;font-weight:700;color:#2130568c}.projects-right{display:flex;justify-content:center}.project-card{width:min(100%,520px);border-radius:22px;border:1px solid #d5dcef;background:linear-gradient(160deg,#f9fbff,#eef3fb 64%,#e7eef9);box-shadow:0 14px 26px #2d3d601f;padding:16px}.project-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.project-state{display:inline-flex;align-items:center;border-radius:999px;border:1px solid #bed0f7;background:#e9f0ff;color:#33549a;font-size:12px;font-weight:700;padding:6px 10px}.project-links{display:flex;align-items:center;gap:8px}.project-github{width:38px;height:38px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center}.project-github svg{width:20px;height:20px;fill:currentColor}.project-live{border:1px solid #cad5ef;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700;color:#2b406f;background:#fff}.project-visual{margin:12px 0 10px;height:184px;border-radius:16px;border:1px solid #d3dcef;background:radial-gradient(circle at 82% 22%,#80afff61,#80afff00 38%),radial-gradient(circle at 24% 78%,#61e5d733,#61e5d700 42%),linear-gradient(180deg,#eef3ff,#e4ebfa);display:grid;place-items:center}.project-avatar{width:78px;height:78px;border-radius:22px;display:grid;place-items:center;font-size:26px;font-weight:800;color:#1f345c;border:1px solid rgba(255,255,255,.65);background:linear-gradient(180deg,#fff,#edf2ff);box-shadow:0 12px 18px #445d8e38}.project-card h3{margin:8px 0 6px;font-size:clamp(26px,3vw,34px)}.project-card p{margin:0;color:#49556e;line-height:1.5}.project-tech{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}.project-tech span{border:1px solid #cfd9ef;border-radius:999px;background:#fff;color:#33496f;font-size:12px;font-weight:700;padding:6px 10px}.project-highlights{margin:12px 0 0;padding-left:18px;display:grid;gap:4px;color:#45516a;font-size:14px}.project-nav{margin-top:14px;display:flex;justify-content:flex-end;align-items:center;gap:8px}.project-count{margin-right:4px;font-size:12px;color:#5f6c88;font-weight:700}.project-arrow{width:34px;height:34px;border-radius:50%;border:1px solid #c7d3eb;background:#fff;cursor:pointer}.design{display:grid;grid-template-columns:minmax(320px,540px) minmax(320px,1fr);align-items:center;gap:26px}.design-left{max-width:540px}.design-right{display:flex;justify-content:center;order:-1}.design-path{margin-top:14px;font-size:14px;color:#4a556d}.design-path code{padding:2px 7px;border-radius:8px;border:1px solid #d8deea;background:#fffc}.design-folder-stack{margin-top:20px;position:relative;height:182px;transform:rotate(-14deg);transform-origin:left center;padding-left:8px}.design-folder-btn{--offset-x: calc(var(--idx) * 34px);--offset-y: calc(var(--idx) * -3px);position:absolute;left:var(--offset-x);top:calc(72px + var(--offset-y));z-index:calc(10 + var(--idx));width:150px;height:92px;border:1px solid rgba(217,236,255,.86);border-radius:16px;background:linear-gradient(180deg,#e2f1ffe6,#b3d4f6b3);box-shadow:0 12px 18px #4171b02e,inset 0 1px #ffffffc2,inset 0 -8px 14px #6c9eda33;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transform-style:preserve-3d;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,border-color .22s ease}.design-folder-btn:before{content:"";position:absolute;left:10px;top:-9px;width:58px;height:16px;border-radius:8px 8px 0 0;border:1px solid rgba(217,236,255,.86);border-bottom:0;background:linear-gradient(180deg,#ecf7ffeb,#c6def9c7);transition:transform .22s ease,background-color .22s ease,border-color .22s ease}.design-folder-btn:after{content:"";position:absolute;left:6px;right:6px;top:6px;height:38px;border-radius:12px 12px 6px 6px;border:1px solid rgba(214,234,255,.78);background:linear-gradient(180deg,#eef8ff9e,#aed2f65c);box-shadow:inset 0 1px #ffffff8c;transform-origin:bottom center;transition:transform .24s ease,background-color .24s ease,border-color .24s ease;pointer-events:none}.design-folder-btn:hover,.design-folder-btn.active{z-index:200;background:linear-gradient(180deg,#2282e7f5,#0856b7f0);border-color:#82c6ffeb;box-shadow:0 18px 28px #0f3a7e73,inset 0 1px #cfe9ffa8,inset 0 -10px 14px #042c656b}.design-folder-btn:hover:before,.design-folder-btn.active:before{background:linear-gradient(180deg,#96d4ffe6,#3c8ee3cc);border-color:#82c6ffe6}.design-folder-btn:hover:after,.design-folder-btn.active:after{background:linear-gradient(180deg,#58abf1d1,#106acaa8);border-color:#82c6ffe6;transform:translateY(-24px) rotateX(56deg)}.design-folder-btn:hover{transform:translateY(-10px) scale(1.01)}.design-folder-btn.active{transform:translateY(-8px)}.design-folder-label{position:absolute;left:12px;bottom:10px;right:10px;text-align:left;font-size:12px;font-weight:700;color:#1e4070e6;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.design-folder-btn:hover .design-folder-label,.design-folder-btn.active .design-folder-label{color:#edf7fff5}.design-model-list{margin-top:16px;display:grid;gap:8px}.design-model-item{border:1px solid #d4dbe9;background:#ffffffd1;border-radius:14px;text-align:left;padding:11px 13px;display:grid;gap:4px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.design-model-item span{color:#27324d;font-weight:700;font-size:14px}.design-model-item small{color:#64708b;font-size:12px}.design-model-item:hover{transform:translateY(-1px);border-color:#b8c5e1}.design-model-item.active{border-color:#7a9df2;background:linear-gradient(180deg,#e9f1fff5,#dce8ffe0);box-shadow:0 8px 14px #7b95d633}.design-viewer-card{width:min(100%,520px);min-height:460px;border-radius:28px;padding:14px;border:1px solid #d9dde8;background:linear-gradient(180deg,#f6f8ffe0,#ecf1fbcc);box-shadow:0 22px 32px #68789824,inset 0 1px #ffffffe6;display:grid;grid-template-rows:1fr auto auto;gap:12px}.design-canvas-wrap{min-height:340px;border:1px solid #cfd7e8;border-radius:20px;overflow:hidden;background:radial-gradient(circle at 30% 20%,#f7f9ff,#eef3ff 45%,#e8edf8)}.design-canvas-wrap canvas{width:100%!important;height:100%!important;display:block}.design-status{margin:0;font-size:13px;color:#a53a3a;font-weight:600}.design-zoom-controls{display:flex;gap:10px;justify-content:flex-end}.design-zoom-controls button{border:1px solid #cad4ea;border-radius:999px;background:#fff;color:#2d3a57;font-size:13px;font-weight:700;padding:9px 14px;cursor:pointer;transition:transform .15s ease,border-color .15s ease}.design-zoom-controls button:hover{transform:translateY(-1px);border-color:#9cb0de}.contact{display:grid;grid-template-columns:minmax(320px,560px) minmax(320px,1fr);gap:24px;align-items:start}.contact-left{max-width:560px}.contact-left h1{color:#2b3e66}.contact-cards{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.contact-note{margin:18px 0 0;font-size:14px;line-height:1.6;color:#68707f}.contact-card{position:relative;min-height:78px;padding:10px 12px;border:1px solid rgba(226,226,220,.95);border-radius:18px;background:linear-gradient(180deg,#fff,#f2f2ef);transform:perspective(700px) translateZ(0);transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 16px 20px #adaa9d4d,0 3px 5px #adaa9d3d,inset 0 2px 1px #fffffff2,inset 0 -4px 6px #b7b4a642}.contact-card:before{content:"";position:absolute;left:8px;right:8px;top:4px;height:34%;border-radius:14px;background:linear-gradient(180deg,#ffffffe0,#fff0);pointer-events:none}.contact-card:hover{transform:perspective(700px) translateY(-2px);box-shadow:0 20px 24px #adaa9d57,0 4px 7px #adaa9d3d,inset 0 2px 1px #fffffff5,inset 0 -4px 7px #b7b4a647}.contact-label{display:inline-block;font-size:11px;color:#85867f;margin-bottom:3px;text-transform:uppercase;letter-spacing:.06em}.contact-card p,.contact-card a{display:block;margin:0;font-size:15px;color:#2f343a;font-weight:700;line-height:1.2;overflow-wrap:anywhere;word-break:break-word}.contact-right{display:flex;justify-content:center}.contact-form{width:min(100%,460px);border:1px solid rgba(222,221,214,.96);border-radius:28px;background:linear-gradient(165deg,#f7f6f2,#f3f2ee);padding:20px;display:grid;gap:14px;transition:transform .22s ease,box-shadow .22s ease;box-shadow:18px 18px 34px #aaa48e47,-10px -10px 22px #ffffffdb,0 16px 28px #eddc8e3d,inset 0 1px #ffffffbf}.contact-form:hover{transform:translateY(-2px);box-shadow:22px 22px 38px #aaa48e52,-12px -12px 24px #ffffffe6,0 18px 32px #eddc8e4d,inset 0 1px #ffffffd1}.form-field{display:grid;gap:8px}.form-field span{font-size:12px;color:#667085;font-weight:600;padding-left:10px;letter-spacing:.03em;text-transform:uppercase}.pill-input{width:100%;border:1px solid rgba(225,223,214,.98);border-radius:999px;padding:14px 20px;font:inherit;font-size:16px;font-weight:600;color:#2e3238;background:linear-gradient(180deg,#faf9f5,#f1f0eb);transition:border-color .16s ease,background-color .16s ease}.pill-input::placeholder{color:#8b8c89;font-weight:500}.pill-input:hover{background:linear-gradient(180deg,#fcfbf8,#f3f1ec)}.pill-input:focus{outline:none;border-color:#d9c677f2;background:#fffef9}.form-field textarea.pill-input{resize:vertical;min-height:118px;border-radius:32px;font-size:17px;line-height:1.5}.contact-submit{border:1px solid rgba(225,223,214,.98);border-radius:999px;padding:13px 18px;font-size:16px;font-weight:700;cursor:pointer;color:#2e3238;background:linear-gradient(180deg,#faf9f5,#f1f0eb);transition:border-color .16s ease,background-color .16s ease}.contact-submit:hover{border-color:#d9c677f2;background:#fffef9}.contact-submit:active{background:#f4f3ed}.contact-submit:disabled{opacity:.72;cursor:not-allowed}.contact-form-status{margin:2px 2px 0;font-size:13px;font-weight:600}.contact-form-status.success{color:#2e7d32}.contact-form-status.error{color:#b3261e}.skills-orb{width:280px;height:280px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffffffbf,#fff0 45%),conic-gradient(from 0deg,#6280e980,#8c6fdf80,#4cb7b373,#6280e980);filter:blur(.3px);animation:orb-spin 12s linear infinite}.skills-tag-cloud{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none}.skill-tag{position:absolute;padding:8px 12px;border-radius:999px;border:1px solid rgba(110,110,110,.2);background:#ffffffe6;font-size:12px;color:#3e3e3e;transform:rotate(calc(var(--i) * 45deg)) translateY(-150px) rotate(calc(var(--i) * -45deg));animation:tag-float 4s ease-in-out infinite;animation-delay:calc(var(--i) * -.25s)}.keyboard-showcase{position:relative;width:100%;min-height:520px;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;padding-left:28px}.code-flow{position:absolute;top:-6px;width:min(100%,620px);height:245px;overflow:hidden;border-radius:12px;background:linear-gradient(180deg,#ffffff8c,#fff0);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.88) 18%,rgba(0,0,0,.88) 62%,rgba(0,0,0,.05));mask-image:linear-gradient(180deg,#0000,#000000e0 18%,#000000e0 62%,#0000000d)}.code-flow-track{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;align-content:start;gap:10px;padding:8px 10px;animation:code-rise-fade 11s linear infinite}.track-2{animation-delay:-5s}.code-flow-track p{margin:0;font-family:Consolas,Courier New,monospace;font-size:15px;color:#5f7de673;white-space:nowrap;opacity:.95}.live-code-panel{position:relative;width:min(100%,560px);min-height:44px;margin-top:150px;padding:10px 12px;border-radius:10px;border:1px solid rgba(90,90,90,.18);background:#ffffffdb;font-family:Consolas,Courier New,monospace;font-size:13px;color:#4b5563}.prompt{color:#6b7280}.typed-line{color:#374151}.code-caret{display:inline-block;width:8px;height:1em;margin-left:2px;border-right:2px solid #5f7de6;animation:caret .8s step-end infinite;vertical-align:text-bottom}.keyboard-frame{width:min(100%,540px);background:linear-gradient(165deg,#323040,#1b1a25 56%,#11111a);border-radius:26px;padding:20px 18px 18px;box-shadow:0 30px 55px #1212186b,0 10px #08080c75,inset 0 1px #ffffff14;transform:perspective(1000px) rotateX(22deg) rotate(-13deg) scale(.82);transform-origin:center bottom}.keyboard-board{border-radius:18px;padding:12px;background:linear-gradient(160deg,#2d2a3b,#201f2d);box-shadow:inset 0 0 0 1px #ffffff0f,inset 0 8px 14px #ffffff0a}.keyboard-row{display:flex;gap:8px;margin-bottom:8px;justify-content:center}.keyboard-row:last-child{margin-bottom:0}.keycap{min-width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;font-size:13px;font-weight:700;color:#a17acf;background:linear-gradient(155deg,#fbf8eb,#efe9d7 72%,#e7dfc9);box-shadow:0 7px #cfc6ab,0 11px 18px #00000045,inset 0 2px #ffffff8c;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}.key-cream{color:#ab84cf;background:linear-gradient(155deg,#fcf9ee,#f1ebd7 72%,#e9e2cb);box-shadow:0 7px #cec4a8,0 11px 18px #00000045,inset 0 2px #ffffff94}.key-lilac{color:#8b6ab9;background:linear-gradient(155deg,#e2d7ff,#cec0f7 72%,#bfafee);box-shadow:0 7px #aa98d2,0 11px 18px #00000042,inset 0 2px #ffffff6b}.key-deep{color:#d9cbf4;background:linear-gradient(155deg,#654c8f,#4a376b 68%,#37284f);box-shadow:0 7px #2e2145,0 12px 18px #00000057,inset 0 2px #ffffff1c}.keycap.is-active{transform:translateY(4px);filter:brightness(1.05)}.popped-keys{position:relative;width:min(100%,540px);height:80px;margin-top:4px}.pop-key{position:absolute;min-width:74px;height:54px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;font-weight:700;font-size:14px;color:#8e70bc;box-shadow:0 8px #cfc6ab,0 16px 20px #0003,inset 0 2px #ffffff8c}.pop-left{left:6px;top:10px;transform:rotate(-10deg)}.pop-bottom{left:46%;top:22px;min-width:120px;transform:translate(-50%) rotate(-4deg)}.pop-right{right:18px;top:8px;min-width:76px;transform:rotate(16deg)}.keycap.w-md{min-width:56px}.keycap.w-sm{min-width:46px}.keycap.w-lg{min-width:70px}.keycap.w-xl{min-width:84px}.keycap.w-xxl{min-width:104px}.keycap.w-space{min-width:210px}.coming-soon{max-width:660px}.section-shell{width:100%}.btn:focus-visible,.theme-toggle:focus-visible,.nav-item:focus-visible,.social-link:focus-visible{outline:2px solid var(--focus-outline);outline-offset:2px}:root[data-theme=dark] .nav{box-shadow:0 18px 30px var(--shadow-soft)}:root[data-theme=dark] .top-chrome:before{background:color-mix(in srgb,#12192c 82%,transparent);box-shadow:0 16px 32px #04071275,inset 0 1px #ffffff14}:root[data-theme=dark] .app-shell{background:var(--app-gradient)}:root[data-theme=dark] .hero-left p,:root[data-theme=dark] .about-left>p,:root[data-theme=dark] .coming-soon p,:root[data-theme=dark] .experience-summary,:root[data-theme=dark] .projects-summary,:root[data-theme=dark] .contact-note,:root[data-theme=dark] .about-card p,:root[data-theme=dark] .experience-points,:root[data-theme=dark] .contact-form-status,:root[data-theme=dark] .code-flow-track p,:root[data-theme=dark] .typed-line,:root[data-theme=dark] .prompt,:root[data-theme=dark] .logo-tile p,:root[data-theme=dark] .social-label,:root[data-theme=dark] .meta-row{color:var(--text-secondary)}:root[data-theme=dark] .role-title,:root[data-theme=dark] .contact-left h1,:root[data-theme=dark] .highlight-value,:root[data-theme=dark] .project-card h3,:root[data-theme=dark] .project-item-label strong,:root[data-theme=dark] .project-state,:root[data-theme=dark] .project-tech span,:root[data-theme=dark] .project-arrow,:root[data-theme=dark] .skill-tag,:root[data-theme=dark] .project-item,:root[data-theme=dark] .contact-card p,:root[data-theme=dark] .contact-card a{color:var(--text-primary)}:root[data-theme=dark] .hover-letter:not(.range-0):not(.range-1):not(.range-2):not(.range-3){color:var(--text-primary)}:root[data-theme=dark] .about-card,:root[data-theme=dark] .experience-card,:root[data-theme=dark] .experience-highlight,:root[data-theme=dark] .project-card,:root[data-theme=dark] .project-item,:root[data-theme=dark] .project-visual,:root[data-theme=dark] .contact-card,:root[data-theme=dark] .contact-form,:root[data-theme=dark] .design-model-item,:root[data-theme=dark] .design-viewer-card,:root[data-theme=dark] .live-code-panel,:root[data-theme=dark] .skill-tag,:root[data-theme=dark] .social-link,:root[data-theme=dark] .badge{border-color:var(--border);background:linear-gradient(180deg,#1f2a46eb,#141c30db);box-shadow:0 18px 28px var(--shadow-soft)}:root[data-theme=dark] .experience-highlight,:root[data-theme=dark] .project-item,:root[data-theme=dark] .project-visual{background:radial-gradient(circle at 85% 18%,#a868f438,#a868f400 38%),linear-gradient(180deg,#212e4cfa,#172138f2)}:root[data-theme=dark] .experience-card,:root[data-theme=dark] .project-card,:root[data-theme=dark] .contact-form,:root[data-theme=dark] .design-viewer-card{background:radial-gradient(circle at 85% 18%,#e05ac229,#e05ac200 36%),linear-gradient(180deg,#1f2a46f5,#151f35f0)}:root[data-theme=dark] .experience-type,:root[data-theme=dark] .experience-impact,:root[data-theme=dark] .experience-focus span,:root[data-theme=dark] .design-zoom-controls button{border-color:#9cade547;background:#263354eb;color:#dde5ff}:root[data-theme=dark] .experience-company,:root[data-theme=dark] .highlight-label,:root[data-theme=dark] .experience-meta,:root[data-theme=dark] .project-card p,:root[data-theme=dark] .project-highlights,:root[data-theme=dark] .project-item-label small,:root[data-theme=dark] .project-item-num,:root[data-theme=dark] .project-count,:root[data-theme=dark] .design-model-item small,:root[data-theme=dark] .contact-label{color:#aebbe0}:root[data-theme=dark] .skill-tag{color:#dbe4ff;border-color:#8ca0dc47;background:linear-gradient(180deg,#1e2945d1,#151e34bd)}:root[data-theme=dark] .project-state{border-color:#8ca0dc57;background:#30426ceb}:root[data-theme=dark] .project-visual{border-color:#8ca0dc3d}:root[data-theme=dark] .project-avatar{background:linear-gradient(180deg,#f2f5fff5,#dee5f8eb);color:#24386d;box-shadow:0 16px 28px #090e1c66}:root[data-theme=dark] .project-tech span,:root[data-theme=dark] .project-live,:root[data-theme=dark] .project-arrow{border-color:#8ca0dc47;background:#263354eb}:root[data-theme=dark] .project-github{background:#eef2ff;color:#18213a}:root[data-theme=dark] .experience-timeline:before{background:linear-gradient(180deg,#8996fff2,#d65ed69e 44%,#6591ff47)}:root[data-theme=dark] .experience-dot{background:#c87fff;box-shadow:0 0 0 4px #c87fff38}:root[data-theme=dark] .project-item:hover,:root[data-theme=dark] .experience-card:hover,:root[data-theme=dark] .design-model-item:hover,:root[data-theme=dark] .social-link:hover,:root[data-theme=dark] .contact-card:hover{border-color:#cc99ff73}:root[data-theme=dark] .pill-input,:root[data-theme=dark] .contact-submit{border-color:var(--border);background:linear-gradient(180deg,#1b253ff5,#131b2deb);color:var(--text-primary)}:root[data-theme=dark] .pill-input::placeholder{color:#8793b4}:root[data-theme=dark] .pill-input:focus,:root[data-theme=dark] .contact-submit:hover{border-color:#d987ff99;background:#23304ffa}:root[data-theme=dark] .design-canvas-wrap{border-color:var(--border);background:radial-gradient(circle at 78% 26%,#cb56d62e,#cb56d600 38%),radial-gradient(circle at 26% 18%,#90a6ff29,#90a6ff00 35%),linear-gradient(160deg,#1c2440,#151d33 48%,#12192c)}:root[data-theme=dark] .keyboard-frame{background:linear-gradient(165deg,#3e2d5a,#231d3b 56%,#151427);box-shadow:0 30px 55px #0407128c,0 10px #05081085,inset 0 1px #ffffff14}:root[data-theme=dark] .keyboard-board{background:linear-gradient(160deg,#2c2446,#1c1831)}:root[data-theme=dark] .code-caret{border-right-color:#d896ff}:root[data-theme=dark] .nav-item:hover,:root[data-theme=dark] .btn-secondary:hover,:root[data-theme=dark] .design-zoom-controls button:hover{border-color:#c999ff6b}@keyframes typing{0%{width:0}to{width:16ch}}@keyframes caret{50%{border-right-color:transparent}}@keyframes name-color{0%{color:#5f7de6}25%{color:#5f9ccf}50%{color:#5cae8f}75%{color:#b58c5f}to{color:#8b7ad1}}@keyframes code-rise-fade{0%{transform:translateY(92%);opacity:0}14%{opacity:.98}74%{opacity:.95}to{transform:translateY(-100%);opacity:0}}@keyframes orb-spin{to{transform:rotate(360deg)}}@keyframes tag-float{50%{transform:rotate(calc(var(--i) * 45deg)) translateY(-162px) rotate(calc(var(--i) * -45deg))}}@keyframes robot-idle{0%,to{transform:perspective(900px) rotateY(-15deg) rotate(-2deg) translateY(0)}25%{transform:perspective(900px) rotateY(-7deg) rotate(-1deg) translateY(-4px)}50%{transform:perspective(900px) rotateY(9deg) rotate(1deg) translateY(-8px)}75%{transform:perspective(900px) rotateY(-9deg) rotate(0) translateY(-3px)}}@keyframes head-look{0%,22%,to{transform:translate(-50%) rotate(0)}38%{transform:translate(-50%) rotate(-10deg)}58%{transform:translate(-50%) rotate(10deg)}76%{transform:translate(-50%) rotate(-6deg)}}@keyframes eye-look{0%,20%,to{transform:translate(0)}38%{transform:translate(-4px)}58%{transform:translate(4px)}}@media (max-width: 1000px){.about-grid{grid-template-columns:1fr}.skills{grid-template-columns:1fr;gap:20px}.experience{grid-template-columns:1fr}.experience-highlights{grid-template-columns:repeat(3,minmax(0,1fr))}.contact,.projects{grid-template-columns:1fr}.logo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.keyboard-frame{transform:perspective(900px) rotateX(16deg) rotate(-8deg)}}@media (max-width: 900px){.page-content{padding-top:14px}.top-chrome{top:8px;min-height:72px;gap:8px;flex-wrap:wrap}.nav{gap:6px;padding:6px;flex-wrap:wrap;justify-content:center}.nav-item{font-size:13px;padding:7px 11px}.page-section{min-height:auto;padding:20px 0 32px;scroll-margin-top:100px}.hero,.about,.experience,.skills,.design,.projects,.contact{grid-template-columns:1fr;gap:26px}.hero-left,.about-left{max-width:100%}h1{font-size:clamp(36px,11vw,52px)}h2{font-size:clamp(24px,8vw,34px)}.hero-right,.about-right,.design-right,.projects-right,.contact-right,.skills-right{order:2}.skills-left{order:1}.hero-right{justify-content:center;padding-left:0}.experience-highlights{grid-template-columns:1fr}.experience-timeline{padding-left:20px}.experience-dot{left:-19px}.design-viewer-card{min-height:380px;padding:10px}.design-folder-stack{height:156px;transform:rotate(-12deg)}.design-folder-btn{--offset-x: calc(var(--idx) * 28px);width:122px;height:78px;top:calc(64px + var(--offset-y))}.design-canvas-wrap{min-height:280px}.robot-scene{width:min(100%,350px);height:430px}.robot-body-wrap{width:196px;height:318px;margin-bottom:44px}.robot-head{width:162px;height:126px}.robot-face{top:18px;height:90px}.robot-eye.left{left:40px}.robot-eye.right{right:40px}.robot-torso{top:146px;width:104px;height:96px}.robot-arm{top:158px;height:64px}.robot-shadow{width:188px;bottom:36px}.keyboard-showcase{min-height:500px;padding-left:0}.live-code-panel{margin-top:126px}.keyboard-frame{transform:none;padding:14px 12px 12px}.keyboard-board{padding:8px}.keyboard-row{gap:6px;margin-bottom:6px}.keycap{min-width:34px;height:36px;border-radius:10px;font-size:11px;padding:0 8px}.keycap.w-md{min-width:48px}.keycap.w-lg{min-width:58px}.keycap.w-xl{min-width:68px}.keycap.w-xxl{min-width:84px}.keycap.w-space{min-width:150px}.popped-keys{height:64px}.pop-key{min-width:58px;height:44px;font-size:12px;border-radius:12px;padding:0 10px}.pop-bottom{min-width:90px}.skills-right{min-height:340px}.contact-cards{grid-template-columns:1fr}.contact-form{transform:none}.contact-form:hover{transform:translateY(-2px)}.logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center}.skills-orb{width:230px;height:230px}.skill-tag{transform:rotate(calc(var(--i) * 45deg)) translateY(-125px) rotate(calc(var(--i) * -45deg))}}@media (max-width: 640px){#about.page-section{min-height:auto}.about{gap:18px}.about-grid{gap:10px}.about-card{padding:14px}.keyboard-showcase{min-height:auto;gap:12px;padding-left:0;overflow:hidden}.code-flow{position:relative;top:0;width:100%;height:160px}.code-flow-track p{font-size:13px}.live-code-panel{width:100%;margin-top:0;font-size:12px}.keyboard-frame{width:100%;padding:12px 8px 10px}.keyboard-board{padding:6px}.keyboard-row{gap:4px;margin-bottom:4px}.keycap{min-width:24px;height:28px;border-radius:8px;padding:0 4px;font-size:9px;box-shadow:0 4px #cfc6ab,0 8px 12px #00000038,inset 0 1px #ffffff8c}.key-cream{box-shadow:0 4px #cec4a8,0 8px 12px #00000038,inset 0 1px #ffffff94}.key-lilac{box-shadow:0 4px #aa98d2,0 8px 12px #0003,inset 0 1px #ffffff6b}.key-deep{box-shadow:0 4px #2e2145,0 8px 12px #00000047,inset 0 1px #ffffff1c}.keycap.w-sm{min-width:30px}.keycap.w-md{min-width:34px}.keycap.w-lg{min-width:40px}.keycap.w-xl{min-width:48px}.keycap.w-xxl{min-width:58px}.keycap.w-space{min-width:100px}.popped-keys{display:none}}