:root{--max-w: 78rem;--gutter: 1.25rem;--gap: 1.75rem;--left-w: 100%;--photo-h: 18rem;--photo-max: 22rem;--content-max: 36rem;--footer-h: 3.5rem;--h1: 2.1rem;--p: 1rem;--card-radius: .25rem;--card-border: rgba(120, 230, 255, .65);--card-border-strong: rgba(120, 230, 255, .95);--card-bg: rgba(18, 22, 28, .88);--card-title: #78e6ff}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Prompt,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.55;color:#fff;overflow-x:hidden}.app{min-height:100%;display:flex;flex-direction:column}.screen{flex:1;display:grid;align-items:center;padding:1.5rem var(--gutter)}.layout{width:100%;max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:center}.left{display:grid;justify-items:center;gap:1rem}.right{position:relative;display:grid;justify-items:center;gap:1rem}.topRight{width:100%;display:flex;justify-content:center}.content{width:100%;max-width:var(--content-max);text-align:left}.content h1{margin:0 0 .75rem;font-size:var(--h1);letter-spacing:.02em}.content p{margin:0 0 1.1rem;font-size:var(--p);opacity:.95}.panel{display:grid;gap:1rem}.photoWrap{width:100%;max-width:var(--photo-max);height:var(--photo-h);overflow:hidden;border-radius:.2rem}.photo{width:100%;height:100%;object-fit:contain;object-position:center;display:block}.social{display:flex;gap:1.1rem;justify-content:center;align-items:center;margin-top:.25rem}.social-media-icon{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:999px;color:#ffffffeb;text-decoration:none;transition:transform .18s ease,opacity .18s ease,background-color .18s ease;opacity:.95}.social-media-icon i{font-size:1.35rem;line-height:1}.social-media-icon:hover{transform:translateY(-.12rem);opacity:1;background:#ffffff1a}.social-media-icon:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}.btn{--btn-color: #b86cff;--btn-border: rgba(184,108,255,.75);display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:.65rem 1.35rem;border-radius:.25rem;border:.12rem solid var(--btn-border);background:transparent;color:var(--btn-color);text-decoration:none;font-size:1rem;font-weight:500;letter-spacing:.01em;transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease}.btn:hover{background:#b86cff1f;border-color:#b86cfff2;box-shadow:0 .6rem 1.6rem #b86cff2e;transform:translateY(-.06rem)}.btn:active{transform:translateY(0);box-shadow:0 .35rem 1.1rem #b86cff1f}.btn:focus-visible{outline:.14rem solid rgba(255,255,255,.75);outline-offset:.18rem}.toggles{display:flex;align-items:center;gap:1rem}.toggleBtn{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;margin:0;cursor:pointer;line-height:0;display:grid;place-items:center}.toggleIcon{width:3rem;height:3rem;display:block;overflow:visible}.user-icon path{fill:#fffffff2}.react-logo path{fill:#06d6f7}.rails-text,.rails-drawing{fill:#cb0100;transform-origin:50% 50%}.toggleBtn:focus-visible{outline:2px solid rgba(255,255,255,.75);outline-offset:6px;border-radius:.6rem}.toggleBtn .user-icon{transition:transform .22s ease}.toggleBtn:hover .user-icon{transform:rotate(-40deg)}@keyframes reactSpin{to{transform:rotate(360deg)}}.toggleBtn:hover .react-logo{animation:reactSpin 2s linear infinite;filter:drop-shadow(0 0 .45rem rgba(97,218,251,.85)) drop-shadow(0 0 1.1rem rgba(97,218,251,.844))}@keyframes railsSwapText{0%,to{transform:scale(1.08)}50%{transform:scale(.92)}}@keyframes railsSwapRails{0%,to{transform:scale(.92)}50%{transform:scale(1.08)}}.toggleBtn:hover .rails-text{animation:railsSwapText .9s ease-in-out infinite}.toggleBtn:hover .rails-drawing{animation:railsSwapRails .9s ease-in-out infinite}.toggleBtn.active .rails-text,.toggleBtn.active .rails-drawing{fill:#fd3737}@media(prefers-reduced-motion:reduce){.toggleBtn:hover .user-icon,.toggleBtn:hover .react-logo,.toggleBtn:hover .rails-text,.toggleBtn:hover .rails-drawing{animation:none!important;transition:none!important;transform:none!important;filter:none!important}}.projectsGrid{display:grid;gap:clamp(1rem,2vw,1.75rem);align-items:stretch;grid-template-columns:1fr;width:100%}.projectCard{border:1px solid var(--card-border);border-radius:var(--card-radius);overflow:hidden;background:transparent;display:flex;flex-direction:column;height:100%;min-height:0}.projectCard:hover{border-color:var(--card-border-strong);transform:translateY(-.15rem);box-shadow:0 0 .9rem #78e6ff2e,0 0 1.6rem #78e6ff1a}.projectCard__media{height:clamp(9rem,18vw,10.5rem);background:#00000026;flex:1 1 auto;min-height:0}.projectCard__img{width:100%;height:100%;object-fit:cover;display:block}.projectCard__body{background:var(--card-bg);padding:clamp(.75rem,1.2vw,.95rem);padding-bottom:clamp(.85rem,1.4vw,1.1rem);display:grid;grid-template-rows:auto auto;gap:.65rem;justify-items:center;text-align:center;flex:0 0 auto;min-height:5.2rem}.projectCard__title{margin:0;font-size:clamp(.98rem,1.1vw,1.08rem);font-weight:600;color:var(--card-title);letter-spacing:.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.projectCard__links{display:flex;gap:.9rem;justify-content:center;align-items:center;margin-top:.15rem}.projectCard__iconBtn{width:2.1rem;height:2.1rem;border-radius:999px;display:grid;place-items:center;color:var(--card-title);border:1px solid rgba(120,230,255,.45);background:#0000001f;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;text-decoration:none}.projectCard__iconBtn i{font-size:1.05rem;line-height:1}.projectCard__iconBtn:hover{transform:translateY(-.08rem) scale(1.03);border-color:#78e6ffe6;background:#78e6ff1a;box-shadow:0 0 .9rem #78e6ff2e}.footer{height:var(--footer-h);display:grid;place-items:center;border-top:1px solid rgba(255,255,255,.25);opacity:.95}.app.about{background:linear-gradient(180deg,#170c18 44%,#85479b 87%,#d971f0)}.app.react{background:linear-gradient(180deg,#282c34,#1891a6 65%,#61dafb 95%)}.app.rails{background:linear-gradient(180deg,#f6b4b4,#fd3737 65%,#c00 95%)}@media(min-width:40rem){:root{--gutter: 2rem;--gap: 2.25rem;--photo-h: 22rem;--photo-max: 26rem;--h1: 2.4rem;--p: 1.02rem}.social{gap:1.25rem}.social-media-icon{width:2.55rem;height:2.55rem}.social-media-icon i{font-size:1.45rem}.btn{font-size:1.03rem;padding:.7rem 1.45rem}.projectsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:56rem){:root{--gap: 3.25rem;--left-w: 26rem;--photo-h: 26rem;--photo-max: 100%;--content-max: 38rem;--h1: 2.7rem;--toggles-h: 3.25rem}body{overflow:hidden}.screen{padding:2rem var(--gutter)}.layout{grid-template-columns:var(--left-w) 1fr;align-items:start}.left{justify-items:start;grid-template-rows:auto auto;align-content:start}.photoWrap{width:100%;height:var(--photo-h)}.social{justify-content:center;width:100%;padding-top:1rem;margin-top:.6rem}.right:has(.projectsGrid){position:relative;align-items:start;justify-items:stretch}.right:has(.projectsGrid) .topRight{position:absolute;right:0;top:0;height:var(--toggles-h);display:flex;align-items:center;justify-content:flex-end;transform:translateY(calc(-1 * (var(--toggles-h) + .9rem)));margin:0;width:auto;z-index:5}.right:has(.projectsGrid) .projectsGrid{height:var(--photo-h);width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem);align-items:stretch;align-content:stretch;overflow:visible}.projectCard__iconBtn{width:2rem;height:2rem}.projectCard__iconBtn i{font-size:1rem}}@media(min-width:72rem){:root{--left-w: 27rem;--photo-h: 27rem;--content-max: 40rem;--h1: 2.9rem;--p: 1.05rem}.screen{padding:2.5rem 3rem}}@media(min-width:90rem){:root{--max-w: 82rem;--left-w: 28rem;--photo-h: 28rem;--content-max: 42rem}}