:root{--bg-primary: hsl(20, 30%, 98%);--bg-secondary: hsl(20, 30%, 95%);--text-primary: #222222;--text-secondary: #404040;--text-muted: #808080;--border-light: #808080;--border-dark: #404040;--hover-bg: #2980b9;--hover-text: #ffffff;--nav-bg: var(--bg-primary);--nav-border: var(--border-light);--nav-border-accent: var(--border-dark);--nav-text: var(--text-primary);--nav-hover-bg: var(--hover-bg);--nav-hover-text: var(--hover-text);--form-bg: #ffffff;--form-border: #dddddd;--form-border-focus: #666666;--form-text: var(--text-primary);--portfolio-border: #cccccc;--portfolio-overlay: rgba(0, 0, 0, .7);--tag-bg: #F8FCFD;--tag-border: #a1a1a1;--tag-text: var(--text-primary);--bg-grid-pattern: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- Grid Lines --%3E%3Cpath d='M10 0v100M30 0v100M70 0v100M90 0v100M0 10h100M0 30h100M0 70h100M0 90h100' stroke='%23000000' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M50 0v100M0 50h100' stroke='%23000000' stroke-opacity='0.1' stroke-width='1' fill='none'/%3E%3C!-- Crosshair (Center) --%3E%3Cpath d='M46.5 50h7M50 46.5v7' stroke='%23000000' stroke-opacity='0.3' stroke-width='1' fill='none'/%3E%3C!-- Dot (Corners) --%3E%3Crect x='0' y='0' width='1' height='1' fill='%23000000' fill-opacity='0.3'/%3E%3C/svg%3E")}html.dark{--bg-primary: #170b1c;--bg-secondary: #2c1338;--text-primary: #ffffff;--text-secondary: #e5c8f6;--text-muted: #b8a1c9;--border-light: #5a2a73;--border-dark: #7d4094;--hover-bg: #2980b9;--hover-text: #ffffff;--nav-bg: var(--bg-secondary);--nav-border: var(--border-light);--nav-border-accent: var(--border-light);--nav-text: var(--text-primary);--nav-hover-bg: var(--hover-bg);--nav-hover-text: var(--hover-text);--form-bg: var(--bg-secondary);--form-border: var(--border-light);--form-border-focus: var(--border-dark);--form-text: var(--text-primary);--portfolio-border: var(--border-light);--portfolio-overlay: rgba(0, 0, 0, .8);--tag-bg: var(--bg-secondary);--tag-border: var(--border-light);--tag-text: var(--text-primary);--bg-grid-pattern: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- Grid Lines --%3E%3Cpath d='M10 0v100M30 0v100M70 0v100M90 0v100M0 10h100M0 30h100M0 70h100M0 90h100' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M50 0v100M0 50h100' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='1' fill='none'/%3E%3C!-- Crosshair (Center) --%3E%3Cpath d='M46.5 50h7M50 46.5v7' stroke='%23ffffff' stroke-opacity='0.3' stroke-width='1' fill='none'/%3E%3C!-- Dot (Corners) --%3E%3Crect x='0' y='0' width='1' height='1' fill='%23ffffff' fill-opacity='0.3'/%3E%3C/svg%3E")}header{top:.5em;position:relative}html{background-color:var(--bg-primary);background-image:var(--bg-grid-pattern);background-attachment:fixed;font-family:Atkinson Hyperlegible Next Variable,sans-serif;color:var(--text-primary)}body{margin:0 auto;width:100%;max-width:60em;padding:1rem;line-height:1.5;color:var(--text-primary);border:1px solid var(--portfolio-border);background-color:var(--bg-primary)}*{box-sizing:border-box}strong,b{font-weight:700}h1{margin:1rem 0;font-size:1.75rem;padding-top:.25rem;border-bottom:3px solid var(--border-dark);padding-bottom:.5rem;color:var(--text-primary)}h2{border-bottom:1px dashed var(--border-light);padding-bottom:.5rem;color:var(--text-primary)}button{padding:.5rem;margin-bottom:1em;width:100%;background:var(--bg-primary);border:1px solid var(--border-light);border-bottom:3px solid var(--border-dark);flex-direction:column;align-items:flex-start;font:inherit;color:var(--text-primary);cursor:pointer}button:hover,button:focus{background-color:var(--hover-bg);color:var(--hover-text)}body:before{content:"";position:fixed;top:-1em;left:0;right:0;height:1.25em;background:linear-gradient(to right,pink,red 10%,orange 22%,#ff0 36%,green 53%,#00f 68%,indigo 82%,violet 100%,#fff0);opacity:1;z-index:2;pointer-events:none}header{position:sticky;top:1em;z-index:1}header nav{padding:.5em;background:var(--nav-bg);border:1px solid var(--nav-border);border-bottom:3px solid var(--nav-border-accent);display:flex;flex-direction:column;align-items:flex-start}.nav-top-row{display:flex;align-items:center;width:100%}.site-title{font-size:1.25em;white-space:nowrap;margin:0;color:var(--nav-text)}.nav-links{display:grid;grid-template-columns:repeat(4,2fr);gap:.25rem;width:100%;max-height:unset;overflow:visible;transition:none;scrollbar-width:none;padding-top:.5rem}.nav-links::-webkit-scrollbar{display:none}.nav-links a{display:block;text-align:center;text-decoration:none;font-size:1rem;font-weight:700;text-transform:uppercase;border:1px solid var(--nav-border);padding:1px;color:var(--nav-text);font-size:.9em}.nav-links a.active{border-top:3px solid var(--nav-border)}.nav-links a:hover,.nav-links a:focus{background-color:var(--nav-hover-bg);color:var(--nav-hover-text)}@media screen and (min-width: 769px){body{margin-top:1em;margin-bottom:1em}header nav{padding:.15em;flex-direction:row;justify-content:space-between;align-items:center}.nav-top-row{display:contents}.site-title{margin:0 0 0 .25em}.nav-links{display:flex;max-height:unset;overflow:visible;width:auto;padding-top:0}.nav-links a{padding:2px 10px;margin:.25em;background-color:transparent}}.tile-container{display:grid;gap:1rem}.tile-item{border:1px solid var(--border-light);padding:.5rem;background-color:var(--bg-primary)}.tile-item:hover,.tile-item:focus{background-color:var(--hover-bg);color:var(--hover-text)}.tile-item a{text-decoration:none;color:inherit;display:block}@media screen and (min-width: 769px){.tile-container{grid-template-columns:repeat(auto-fill,minmax(350px,1fr))}}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:.5rem}.portfolio-item{position:relative;display:block;overflow:hidden;border:1px solid var(--portfolio-border);text-decoration:none;transition:transform .3s ease}.portfolio-thumbnail-container{position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden}.portfolio-thumbnail{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.portfolio-item:hover .portfolio-thumbnail{transform:scale(1.05)}.portfolio-title-overlay{position:absolute;bottom:0;left:0;right:0;background-color:var(--portfolio-overlay);color:#fff;padding:.5rem;opacity:0;transition:opacity .3s ease;text-align:center}.portfolio-item:hover .portfolio-title-overlay{opacity:1}.portfolio-title-overlay h3{margin:0;font-size:1em;color:#fff}.embedded-video-container{position:relative;width:100%;height:0;padding-bottom:56.25%}.embedded-video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}.about-intro{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem}.about-intro img{order:-1;margin-bottom:1.5rem;max-width:200px}@media screen and (min-width: 512px){.about-intro{flex-direction:row;align-items:flex-start;gap:2rem}.about-intro p{flex:1;text-align:left;margin-bottom:0}.about-intro img{order:1;margin-bottom:0;margin-left:auto}}.tags{display:flex;flex-wrap:wrap;gap:.5rem}.tag{margin-right:.25em;border:1px dotted var(--tag-border);padding:.25em .5em;background-color:var(--tag-bg);color:var(--tag-text);line-height:1.1}.tag:hover,.tag:focus{background-color:var(--nav-hover-bg);color:var(--nav-hover-text)}.tag a{color:inherit;text-decoration:none}.tag--active{outline:2px solid var(--border-dark);outline-offset:2px}pre,code,kbd{font-family:Geist Mono Variable,monospace!important}pre{position:relative;padding:3.5em 1.5em 1em 1em!important;background-color:#282a36!important;overflow-x:auto!important;margin-block-end:1em!important}pre:before{content:attr(data-language);position:absolute;top:1em;left:1em;padding:.25em .5em;background-color:#6272a4;color:#f8f8f2;font-size:.8rem;font-weight:700}pre:not([data-language]):before{content:"TEXT"}code{font-size:.9rem!important;padding:.2rem .4rem!important;background-color:#44475a!important;color:#f8f8f2!important}pre code{padding:0!important;background-color:transparent!important;color:inherit!important;border-radius:0!important}.contact-info{margin-bottom:2rem}.contact-info p{display:flex;align-items:center;margin-bottom:.75rem;color:var(--text-primary)}.contact-info a{color:var(--text-primary);border-bottom:1px solid transparent}.contact-info a:hover{border-bottom-color:var(--text-primary)}.contact-form button{width:100%}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--form-text)}.form-group input,.form-group textarea{width:100%;padding:.75rem;border:1px solid var(--form-border);background-color:var(--form-bg);color:var(--form-text);font-family:inherit;font-size:1rem;box-sizing:border-box}@media (max-width: 600px){.form-group input,.form-group textarea{padding:.6rem;font-size:16px}}.form-group input:focus,.form-group textarea:focus{border-color:var(--form-border-focus);box-shadow:0 0 0 3px #0000001a;outline:none}.contact-form button{background-color:var(--text-secondary);color:var(--bg-primary);border:none;padding:.75rem 1.5rem;font-size:1rem;font-family:inherit;cursor:pointer}.contact-form button:hover{background-color:var(--hover-bg);color:var(--hover-text)}.contact-form{max-width:100%;margin:2rem 0}.form-group{margin-bottom:1.5rem}.name-group{display:flex;gap:.75rem}.name-group .form-group{flex:1}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.required{color:#e74c3c;font-weight:700}.error-message{color:#e74c3c;font-size:.875rem;margin-top:.25rem;min-height:1.25rem;display:block}.help-text{color:#666;font-size:.875rem;margin-top:.25rem;font-style:italic}input:focus,textarea:focus,button:focus{outline:2px solid #3498db;outline-offset:2px;border-color:#3498db}input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#e74c3c;background-color:#e74c3c1a}input[aria-invalid=true]:focus,textarea[aria-invalid=true]:focus{border-color:#e74c3c;background-color:#e74c3c26}html.dark input[aria-invalid=true],html.dark textarea[aria-invalid=true]{background-color:#e74c3c26;border-color:#ff6b6b}html.dark input[aria-invalid=true]:focus,html.dark textarea[aria-invalid=true]:focus{background-color:#e74c3c33;border-color:#ff6b6b}button:disabled{opacity:.6;cursor:not-allowed}.resume-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}.resume-download-btn{flex:1;display:flex;align-items:center;justify-content:center;text-decoration:none;padding:.5rem;margin-bottom:1em;background:var(--bg-primary);border:1px solid var(--border-light);border-bottom:3px solid var(--border-dark);font:inherit;color:var(--text-primary);cursor:pointer;text-align:center}.resume-download-btn:hover,.resume-download-btn:focus{background-color:var(--hover-bg);color:var(--hover-text)!important}@media (prefers-contrast: high){.error-message{color:#000;font-weight:700}.help-text{color:#333}}fieldset{border:none;margin:0;padding:0}legend{font-weight:700;margin-bottom:.5rem}.privacy-notice{background-color:var(--bg-secondary);border:1px solid var(--border-light);padding:1rem;margin:1.5rem 0;font-size:.9rem}.privacy-notice p{margin:0;color:var(--text-primary)}.privacy-notice a{color:var(--text-primary);text-decoration:underline;font-weight:500}.privacy-notice a:hover,.privacy-notice a:focus{color:var(--hover-text);background-color:var(--hover-bg);padding:2px 4px;text-decoration:none}@media (prefers-contrast: high){.privacy-notice{border-width:2px;font-weight:700}}.phone-selector-container{position:relative;display:flex;align-items:stretch;width:100%}.country-selector{align-items:center;justify-content:center;gap:.5rem;padding:.75rem!important;background-color:var(--form-bg)!important;border:1px solid var(--form-border)!important;border-right:none;color:var(--form-text)!important;font-family:inherit;font-size:1rem;cursor:pointer;width:6em!important;height:3rem;flex-shrink:0}.country-selector:hover{background-color:var(--hover-bg)!important;color:var(--hover-text)!important}.country-selector:focus{border-color:var(--form-border-focus);box-shadow:0 0 0 3px #0000001a;outline:none;z-index:1}.country-selector[aria-expanded=true]{border-color:var(--form-border-focus);box-shadow:0 0 0 3px #0000001a}.flag{font-size:1.2em;line-height:1}.country-code{font-weight:500;letter-spacing:.5px}.dropdown-arrow{font-size:.8em}.country-selector[aria-expanded=true] .dropdown-arrow{transform:rotate(180deg)}.dial-code-display{display:flex;align-items:center;padding:.75rem;padding-left:1em;background-color:var(--form-bg);border:1px solid var(--form-border);border-right:none;border-left:none;color:var(--form-text);font-family:Geist Mono Variable,monospace;font-size:1rem;font-weight:500;white-space:nowrap;min-width:0px;width:50px;height:3rem;justify-content:center}.phone-input{flex:1;padding:.75rem .75rem .75rem .25rem;border:1px solid var(--form-border);border-left:none!important;background-color:var(--form-bg);color:var(--form-text);font-family:inherit;font-size:1rem;height:3rem}.phone-input:focus{border-color:var(--form-border-focus);box-shadow:0 0 0 3px #0000001a;outline:none}.phone-input::placeholder{color:var(--text-muted)}.country-dropdown{position:absolute;top:100%;left:0;right:0;background-color:var(--form-bg);border:1px solid var(--form-border);border-top:none;box-shadow:0 4px 12px #00000026;max-height:300px;overflow:hidden;z-index:1000;display:none}.country-dropdown[aria-expanded=true]{display:block}.country-search{width:100%;padding:.75rem;border:none;background-color:var(--bg-secondary);color:var(--form-text);font-family:inherit;font-size:1rem;border-top:1px solid var(--form-border);border-bottom:1px solid var(--form-border);box-sizing:border-box}.country-search::placeholder{color:var(--text-muted)}.country-list{max-height:240px;overflow-y:auto;margin:0;padding:.5em;line-height:2em}.country-option{display:flex;align-items:center;gap:.75rem;cursor:pointer;border-bottom:1px solid var(--form-border)}.country-option:hover,.country-option:focus{background-color:var(--hover-bg);color:var(--hover-text);outline:none}.country-option:last-child{border-bottom:none}.country-option .flag{font-size:1.2em;width:24px;text-align:center}.country-option .country-name{flex:1;font-weight:400}.country-option .dial-code{font-weight:500;font-family:Geist Mono Variable,monospace}html.dark .country-dropdown{border-color:var(--border-light);background-color:var(--bg-secondary)}html.dark .country-search{background-color:var(--bg-primary);border-color:var(--border-light)}html.dark .country-option{border-color:var(--border-light)}@media (prefers-contrast: high){.country-selector,.phone-input,.country-dropdown{border-width:2px}.country-option{border-bottom-width:2px}}.print-only-header{display:none}@media print{header,footer,h1,.resume-download-btn,.about-intro img,body:before{display:none!important}.print-only-header{display:block!important;margin-bottom:2rem}html{background-image:none!important;background-color:#fff!important}body{background-color:#fff!important;color:#000!important;border:none!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;font-size:11pt!important;line-height:1.4;font-family:inherit}h1,h2,h3,h4,p,li{color:#000!important}.print-name{font-size:24pt;font-weight:800;line-height:1.2}.print-title{font-size:14pt;font-weight:500;margin-bottom:.5rem;color:#444!important}.print-contact-details{font-size:10pt;color:#666!important}.print-contact-details:before{content:"Quezon City, Philippines • matthew"}.print-contact-details:after{content:".oyan@gmail.com • +63 947 229 0659"}h2{font-size:16pt!important;margin-top:1.5em;border-bottom:1px solid #000;padding-bottom:.2em}h3{font-size:13pt!important;margin-top:1em;margin-bottom:.2em}a{text-decoration:none!important;color:#000!important}.about-intro{display:block!important}}