:root{font-family:Arial,Helvetica,sans-serif;color:#242424;background:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-size:16px}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none;text-underline-offset:4px}a:hover{text-decoration:underline}a:focus-visible,button:focus-visible{outline:2px solid #252525;outline-offset:6px}button{font:inherit;color:inherit}.page{max-width:1360px;padding:0 64px;margin:0 auto}header{display:flex;align-items:center;justify-content:space-between;padding:58px 0 74px;gap:24px}h1{font-size:20px;line-height:1.4;letter-spacing:-.5px;font-weight:500;margin:0}header>a{font-size:15px;display:flex;gap:10px;align-items:center;min-height:44px}main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;row-gap:64px}article{min-width:0}.preview{display:block;aspect-ratio:3/2;overflow:hidden;cursor:zoom-in}.preview:focus-visible{outline-offset:5px}.caption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:21px}h2,h3{font-size:16px;font-weight:500;letter-spacing:-.15px;line-height:1.5;margin:0}.project-link{font-size:13px;color:#686868;white-space:nowrap;min-height:28px}.project-link span{margin-left:5px}article p{color:#6a6a6a;font-size:14px;line-height:1.65;margin:4px 0 0}footer{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid #e8e8e8;margin-top:96px;padding:27px 0 32px;font-size:12px;line-height:1.6;color:#707070}footer nav{display:flex;gap:26px}footer a{padding:8px 0}dialog{width:min(520px,calc(100% - 40px));padding:28px;border:1px solid #e5e5e5;color:#242424;background:#fff;line-height:1.65;font-size:14px;max-height:calc(100svh - 48px);overflow:auto}dialog::backdrop{background:rgb(0 0 0 / 24%)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.dialog-head h2{font-size:18px}.dialog-head button{border:0;background:transparent;cursor:pointer;padding:8px 0;font-size:12px}.dialog-head button span{margin-left:6px;font-size:18px}dialog a{text-decoration:underline}.muted{color:#6a6a6a}.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip:focus{position:fixed;top:12px;left:24px;width:auto;height:auto;margin:0;padding:12px;clip-path:none;background:white;z-index:5}@media(min-width:1800px){.page{max-width:1680px}main{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 32px}}@media(max-width:900px){.page{padding:0 32px}header{padding:36px 0 52px}main{gap:48px 24px}footer{margin-top:72px}}@media(max-width:620px){.page{padding:0 22px}header{padding:23px 0 37px}h1{font-size:19px}main{grid-template-columns:1fr;row-gap:38px}.caption{margin-top:16px}article p{font-size:14px}footer{margin-top:58px;padding:24px 0;align-items:flex-start;flex-direction:column;gap:10px}footer nav{width:100%;justify-content:space-between;gap:12px}}@media(prefers-reduced-motion:no-preference){a{transition:color .15s ease}a:hover{color:#000}}

.platform{font-size:12px;letter-spacing:0;font-weight:400;color:#737373;margin-left:8px;white-space:nowrap}.image-dialog{width:min(1280px,calc(100% - 40px));padding:20px;max-height:calc(100svh - 32px)}.image-dialog .dialog-head{margin-bottom:16px}@media(max-width:900px){.platform{display:block;margin-left:0;margin-top:2px}}@media(max-width:620px){.platform{display:inline;margin-left:8px;margin-top:0}}@media(max-width:360px){.platform{display:block;margin-left:0}}

/* A proportional 3:2 desktop composition, including in the enlarged view. */
.desktop-scene{position:relative;container-type:inline-size;background:#edf1f6 url('assets/codioful-7130465.jpg') center/cover no-repeat;color:#3c4043;text-decoration:none!important;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;isolation:isolate}
.mock-window{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:.85cqw;overflow:hidden;display:block;box-shadow:0 2.2cqw 5.5cqw -.5cqw rgb(0 0 0 / 42%),0 .5cqw 1.2cqw rgb(0 0 0 / 22%),0 0 0 .07cqw rgb(0 0 0 / 25%),inset 0 0 0 .07cqw rgb(255 255 255 / 70%)}
.browser-window{width:76%;background:#fff}.browser-window svg{display:block;width:1.4cqw;height:1.4cqw;flex-shrink:0}.browser-tabs{display:flex;align-items:center;height:3.1cqw;background:linear-gradient(#e7e9ed,#dfe3e9);padding:0 1.25cqw;gap:1.55cqw;font-size:1.02cqw;box-shadow:inset 0 .08cqw rgb(255 255 255 / 65%)}
.traffic{display:flex;align-items:center;gap:.63cqw;flex-shrink:0}.traffic i{display:block;width:1cqw;height:1cqw;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .07cqw rgb(0 0 0 / 14%)}.traffic i:nth-child(2){background:#febc2e}.traffic i:nth-child(3){background:#28c840}
.browser-tab{display:flex;align-items:center;gap:.75cqw;align-self:flex-end;height:2.7cqw;width:23cqw;padding:0 1.15cqw;background:#fff;border-radius:.8cqw .8cqw 0 0;position:relative}.browser-tab:before,.browser-tab:after{content:"";position:absolute;bottom:0;width:.65cqw;height:.65cqw;background:radial-gradient(circle at 0 0,transparent 70%,#fff 72%)}.browser-tab:before{right:100%}.browser-tab:after{left:100%;transform:scaleX(-1)}.tab-title{flex:1;white-space:nowrap}.browser-tab>svg:last-child{width:1.05cqw;height:1.05cqw}.tab-favicon{width:1.25cqw!important;height:1.25cqw!important}.tab-add{margin-left:-.45cqw}.tab-search{margin-left:auto;background:#d4d8de;border-radius:.5cqw;padding:.25cqw}
.browser-toolbar{display:flex;align-items:center;gap:1.15cqw;height:3.65cqw;padding:0 1.2cqw;background:#fff;border-bottom:.07cqw solid #dadce0;color:#5f6368}.browser-nav{display:flex;gap:1.25cqw}.browser-nav>svg:nth-child(2){opacity:.4}.address{flex:1;min-width:0;background:#f0f2f5;height:2.55cqw;display:flex;align-items:center;gap:.75cqw;padding:0 .65cqw;border-radius:2cqw;font-size:1.04cqw;color:#3c4043}.address-text{flex:1;white-space:nowrap;overflow:hidden}.site-controls{background:#e4e7eb;border-radius:50%;padding:.25cqw}.site-controls svg{width:1.1cqw;height:1.1cqw}.address>svg{margin-right:.25cqw}.browser-profile{display:flex;align-items:center;justify-content:center;width:1.9cqw;height:1.9cqw;border-radius:50%;background:#dce6f3;color:#42648e;overflow:hidden}.browser-profile svg{width:1.6cqw;height:1.6cqw;transform:translateY(.1cqw)}.browser-content{display:block}.browser-content img{display:block;width:100%;height:auto}
.native-window{width:84%;border-radius:.7cqw}.native-crop{display:block;position:relative;aspect-ratio:2120/1332;overflow:hidden;background:#30373e}.native-crop img{display:block;position:absolute;width:115.09434%;height:auto;max-width:none;left:-7.35849%;top:-9.15916%}.native-traffic{position:absolute;top:.7cqw;left:1cqw}.native-traffic .traffic{gap:.55cqw}.native-traffic .traffic i{width:.9cqw;height:.9cqw}
.expanded-preview{width:min(100%,calc((100svh - 160px)*1.5));margin:0 auto;cursor:default}.image-dialog{width:min(1280px,calc(100% - 24px))}

.wallpaper-lavender{background-image:url('assets/codioful-7130498.jpg')}.wallpaper-mint{background-image:url('assets/codioful-7135067.jpg')}.wallpaper-lemon{background-image:url('assets/codioful-7130465.jpg')}.wallpaper-rose{background-image:url('assets/codioful-7130571.jpg')}
.ios-simulator{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:59cqw;width:33cqw;display:flex;flex-direction:column;align-items:center;gap:1.25cqw}
.ios-toolbar{display:flex;align-items:center;justify-content:space-between;width:100%;height:4.25cqw;flex-shrink:0;padding:0 1.05cqw;border-radius:.75cqw;background:linear-gradient(#f5f3f1,#e6e3e0);box-shadow:0 .35cqw 1cqw rgb(0 0 0 / 22%),inset 0 .08cqw rgb(255 255 255 / 85%),0 0 0 .07cqw rgb(0 0 0 / 25%);color:#4c4b4a}
.ios-toolbar .traffic{gap:.5cqw}.ios-toolbar .traffic i{width:.9cqw;height:.9cqw}.ios-title{font-size:1.04cqw;line-height:1.35;font-weight:600;text-align:left;margin-left:.6cqw;margin-right:auto}.ios-title>span{display:block;font-size:.78cqw;font-weight:400;color:#86817d}.ios-tools{display:flex;gap:1.05cqw}.ios-tools svg{display:block;width:1.5cqw;height:1.5cqw}
.iphone-shell{display:block;position:relative;height:53.5cqw;aspect-ratio:1384/2932;flex-shrink:0;padding:.55cqw;background:#111214;border-radius:4.3cqw;border:.2cqw solid #777b80;box-shadow:inset 0 0 0 .13cqw #08090a,0 1.3cqw 3.8cqw rgb(0 0 0 / 35%),0 .25cqw .6cqw rgb(0 0 0 / 25%)}.iphone-screen{display:block;width:100%;height:100%;overflow:hidden;border-radius:3.65cqw;background:#f1f1f7}.iphone-screen img{display:block;width:100%;height:100%;object-fit:fill}.iphone-side{position:absolute;width:.3cqw;background:linear-gradient(90deg,#22252a,#878b90,#272a2d);border-radius:.15cqw}.iphone-volume{height:6.1cqw;left:-.42cqw;top:12.5cqw}.iphone-power{height:5cqw;right:-.42cqw;top:15.5cqw}
.iphone-original{position:relative;display:block;height:53.5cqw;aspect-ratio:635/1282;flex-shrink:0;overflow:hidden;filter:drop-shadow(0 1.3cqw 1.7cqw rgb(0 0 0 / 30%))}.iphone-original img{position:absolute;display:block;width:103.1496%;max-width:none;height:auto;left:-1.5748%;top:-5.3822%}


/* Dark / Developer variant. Approved light baseline lives in variants/light/. */
:root{color-scheme:dark;color:#edeeee;background:#202123;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.page{max-width:1280px;padding:0 48px}
header{display:block;padding:64px 0 44px}
h1{font-size:40px;line-height:1.15;font-weight:550;letter-spacing:-1.2px}
.role{margin:8px 0 0;font-size:18px;line-height:1.5;font-weight:400;color:#b5b7be}
.contact-links{display:flex;gap:24px;margin-top:13px;align-items:center}
.contact-links a,.project-link,.platform,footer{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace}
.contact-links a{display:inline-flex;align-items:center;gap:9px;min-height:32px;font-size:13px;color:#b8babf}
a:hover{color:#fff}
a:focus-visible,button:focus-visible{outline-color:#d7dce2}
main{gap:24px}
article{border:1px solid #3c3e42;border-radius:10px;background:#252629;overflow:hidden}
article>.preview{border-bottom:1px solid #3c3e42}
.caption{padding:0 22px;margin-top:19px;gap:14px}
h2,h3{font-size:16px;font-weight:550;letter-spacing:-.2px}
.platform{font-size:11px;color:#a6a9b0;font-weight:400;letter-spacing:0}
.project-link{font-size:12px;color:#b8bac0}
article p{padding:0 22px;margin:3px 0 22px;color:#b5b7be;font-size:14px;line-height:1.65}
footer{margin-top:52px;border-color:#3b3d41;padding:24px 0 30px;color:#a3a6ad;font-size:11px}
footer nav{gap:24px}
dialog{border:1px solid #484b51;border-radius:10px;background:#252629;color:#eceef1}
dialog::backdrop{background:rgb(0 0 0 / 60%)}
.muted{color:#b5b7be}.skip:focus{background:#252629;color:#fff}
.desktop-scene{color-scheme:light}
@media(min-width:1800px){.page{max-width:1520px}main{gap:24px}}
@media(max-width:900px){.page{padding:0 28px}header{padding:44px 0 34px}.caption{padding:0 18px}article p{padding:0 18px}footer{margin-top:42px}}
@media(max-width:620px){.page{padding:0 20px}header{padding:36px 0 30px}h1{font-size:32px;letter-spacing:-.8px}.role{font-size:16px}main{gap:22px}.caption{margin-top:17px}.platform{font-size:10px;margin-left:6px}article p{margin-bottom:20px;font-size:13px}footer{margin-top:36px;font-size:10px}footer nav{gap:12px}.contact-links{margin-top:10px}}

article>.preview:focus-visible{outline-offset:-4px}

.wallpaper-violet{background-image:url('assets/codioful-7135028.jpg')}
.wallpaper-sunset{background-image:url('assets/codioful-6984991.jpg')}
.wallpaper-azure{background-image:url('assets/codioful-7134996.jpg')}
.wallpaper-amber{background-image:url('assets/codioful-7135041.jpg')}
.wallpaper-coral{background-image:url('assets/codioful-7135121.jpg')}
.wallpaper-dawn{background-image:url('assets/codioful-7135004.jpg')}

/* Dark browser chrome gives the light wallpapers a clearer window edge. */
:is(.wallpaper-mint,.wallpaper-lemon,.wallpaper-lavender,.wallpaper-azure,.wallpaper-rose,.wallpaper-dawn) .browser-window{--chrome-tabs:#292b30;--chrome-surface:#383b41;--chrome-field:#26282d;color:#e1e3e8;background:var(--chrome-surface);box-shadow:0 2.2cqw 5.5cqw -.5cqw rgb(0 0 0 / 42%),0 .5cqw 1.2cqw rgb(0 0 0 / 22%),0 0 0 .07cqw rgb(0 0 0 / 45%)}
:is(.wallpaper-mint,.wallpaper-lemon,.wallpaper-lavender,.wallpaper-azure,.wallpaper-rose,.wallpaper-dawn) .browser-tabs{background:var(--chrome-tabs);box-shadow:inset 0 .08cqw rgb(255 255 255 / 12%)}
:is(.wallpaper-mint,.wallpaper-lemon,.wallpaper-lavender,.wallpaper-azure,.wallpaper-rose,.wallpaper-dawn) .browser-tab{background:var(--chrome-surface)}
:is(.wallpaper-mint,.wallpaper-lemon,.wallpaper-lavender,.wallpaper-azure,.wallpaper-rose,.wallpaper-dawn) .browser-tab::before,:is(.wallpaper-mint,.wallpaper-lemon,.wallpaper-lavender,.wallpaper-azure,.wallpaper-rose,.wallpaper-dawn) .browser-tab::after{background:radial-gradient(circle at 0 0,transparent 70%,var(--chrome-surface) 72%)}
:is(.wallpaper-mint,.wallpaper-lemon,.wallpaper-lavender,.wallpaper-azure,.wallpaper-rose,.wallpaper-dawn) .browser-toolbar{background:var(--chrome-surface);color:#d5d8de;border-color:#202226}
:is(.wallpaper-mint,.wallpaper-lemon,.wallpaper-lavender,.wallpaper-azure,.wallpaper-rose,.wallpaper-dawn) .address{background:var(--chrome-field);color:#e1e3e8}
:is(.wallpaper-mint,.wallpaper-lemon,.wallpaper-lavender,.wallpaper-azure,.wallpaper-rose,.wallpaper-dawn) :is(.site-controls,.tab-search){background:#454950}
:is(.wallpaper-mint,.wallpaper-lemon,.wallpaper-lavender,.wallpaper-azure,.wallpaper-rose,.wallpaper-dawn) .browser-profile{background:#4b5668;color:#dce7fa}

.section-label{margin:0 0 16px;font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-size:13px;font-weight:400;line-height:1.5;letter-spacing:0;color:#a6a9b0}

/* About page shares the portfolio header and restrained typography. */
.contact-links{flex-wrap:wrap;row-gap:4px}
.contact-links a[aria-current="page"]{color:#edeeee;text-decoration:underline;text-underline-offset:5px}
h1 a:hover{text-decoration:none}
.about-content{display:block;max-width:640px}
.about-content .section-label{margin-bottom:24px}
.about-content p{margin:0 0 24px;color:#d2d3d7;font-size:18px;line-height:1.8}
.about-content p:last-child{margin-bottom:0}
.about-content p a{text-decoration:underline;text-decoration-color:#777b83;text-decoration-thickness:1px;text-underline-offset:4px}
.about-content p a:hover{text-decoration-color:currentColor}
.preview[href^="/projects/"]{cursor:pointer}
.placeholder-label{position:absolute;right:12px;bottom:12px;padding:4px 7px;border-radius:4px;background:rgb(32 33 35 / 78%);color:#fff;font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}
.project-detail{display:block}
.back-link,.external-project-link,.project-pagination,.project-meta{font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}
.back-link{display:inline-block;color:#a6a9b0;margin-bottom:32px}
.project-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.project-copy .section-label{margin-bottom:12px}
.project-copy h2{font-size:34px;line-height:1.2;letter-spacing:-.7px;margin-bottom:26px}
.project-copy>p:not(.section-label){font-size:17px;line-height:1.8;color:#d2d3d7;margin:0 0 20px}
.project-meta{margin-top:28px;color:#b5b7be}
.project-meta>span{color:#92959d}
.project-meta p{margin:5px 0 0}
.external-project-link{display:inline-flex;align-items:center;gap:10px;margin-top:26px;text-decoration:underline;text-underline-offset:5px;min-height:32px}
.coming-soon{color:#b5b7be;text-decoration:none}
.coming-soon span{font-size:11px;color:#92959d;border:1px solid #484b51;padding:2px 6px;border-radius:4px}
.project-visual .preview{border:1px solid #3c3e42;border-radius:10px;cursor:default}
.project-pagination{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #3b3d41;margin-top:56px;padding-top:24px;color:#b8babf}
article[id]{scroll-margin-top:24px}
@media(max-width:900px){.project-intro{gap:28px}.project-copy h2{font-size:30px}.project-copy>p:not(.section-label){font-size:16px}}
@media(max-width:720px){.project-intro{grid-template-columns:1fr}.project-visual{margin-top:12px}.back-link{margin-bottom:24px}.project-pagination{margin-top:36px;font-size:12px;gap:16px}.project-copy h2{font-size:30px}}
.about-page footer{margin-top:64px}
@media(min-width:1100px){#projects{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.about-content p{font-size:16px;line-height:1.75;margin-bottom:22px}.about-page footer{margin-top:48px}}

/* Directly accessible footer pages. */
.info-page .page{min-height:100svh;display:flex;flex-direction:column}
.info-content{display:block;max-width:680px;width:100%;flex:1}
.info-content>h2{font-size:30px;line-height:1.25;letter-spacing:-.6px;margin:0 0 36px}
.info-content section+section{margin-top:36px}
.info-content h3{font-size:16px;line-height:1.5;margin:0 0 12px}
.info-content p,.credit-links{font-size:16px;line-height:1.8;color:#c5c7cd;margin:0 0 16px}
.info-content a{text-decoration:underline;text-decoration-color:#777b83;overflow-wrap:anywhere}
.info-content a:hover{text-decoration-color:currentColor}
.credit-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 28px;padding:0;list-style:none}
footer nav{flex-wrap:wrap}footer nav a[aria-current="page"]{color:#edeeee;text-decoration:underline}
@media(max-width:620px){.info-content>h2{font-size:26px;margin-bottom:28px}.info-content p,.credit-links{font-size:15px}.credit-links{grid-template-columns:1fr;gap:6px}footer nav{justify-content:flex-start;gap:24px}footer{font-size:11px}}