@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";:root{--color-bg: #0a0a0a;--color-surface: #111110;--color-surface-deep: #0d0d0c;--color-border: #232320;--color-border-subtle: #1e1e1c;--color-border-mid: #2c2c29;--color-text-primary: #e8e6dc;--color-text-secondary: #a8a69d;--color-text-muted: #5a5953;--color-text-faint: #3a3a37;--color-green: #33d17a;--color-blue: #3fa0e0;--color-amber: #e8a33d;--tint-green: rgba(51, 209, 122, .3);--tint-blue: rgba(63, 160, 224, .3);--tint-amber: rgba(232, 163, 61, .3);--font-mono: "JetBrains Mono", monospace;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 28px;--space-xl: 48px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-pill: 20px;--page-padding: 1.75rem}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{background:var(--color-bg);color:var(--color-text-primary);font-family:var(--font-mono);font-size:14px;line-height:1.6;min-height:100dvh;width:100vw;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;overflow-x:hidden}#hero-canvas,#footer-canvas,.card-thumb-canvas,.about-mini-sandbox canvas{touch-action:none;-webkit-user-select:none;user-select:none}.brand,.btn,.card,.nav-pill,.nav-back,.footer-socials a,#contact-form button{-webkit-user-select:none;user-select:none}img,canvas{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font-family:var(--font-mono);cursor:pointer;background:none;border:none}.btn{font-family:var(--font-mono);font-size:14px;padding:8px 14px;border-radius:var(--radius-md);transition:opacity .2s;cursor:pointer;border:none}.btn:hover{opacity:.85}.btn--primary{background:var(--color-green);color:var(--color-bg);border:1px solid transparent}.btn--primary:hover{color:var(--color-green);background-color:var(--color-bg);border:1px solid var(--color-green)}.btn--ghost{background:transparent;color:var(--color-text-secondary);border:.5px solid var(--color-border-mid)}.btn--ghost:hover{color:var(--color-green);background-color:var(--color-bg);border:1px solid var(--color-green)}.site-nav,main{max-width:1440px;width:100%;padding-inline:var(--page-padding);margin:auto}main{flex:1}.site-nav{display:flex;justify-content:space-between;align-items:center;padding-block:1.5rem}.brand{font-size:1.25rem;font-weight:500;letter-spacing:1.5px;color:var(--color-text-primary);transition:color .2s ease}.brand:hover{color:var(--color-green)}.site-nav nav{display:flex;gap:var(--space-sm)}.nav-pill{font-size:14px;color:var(--color-text-secondary);border:.5px solid var(--pill-accent, var(--color-border-mid));padding:5px 14px;border-radius:var(--radius-pill);transition:border-color .2s,color .2s}.nav-pill:hover{color:var(--color-text-primary);border-color:var(--color-green)}.nav-pill[data-active=true]{color:var(--color-text-primary)}.nav-back{font-size:12px;color:var(--color-text-secondary);border:.5px solid var(--color-border-mid);padding:5px 14px;border-radius:var(--radius-pill);display:flex;align-items:center;gap:6px;transition:border-color .2s,color .2s}.nav-back:hover{color:var(--color-text-primary);border-color:var(--color-green)}.hero{position:relative;height:240px;border-radius:var(--radius-lg);overflow:hidden;background:radial-gradient(circle at 50% 30%,#121210 0%,var(--color-bg) 70%);margin-bottom:.5rem}#hero-canvas{width:100%;height:100%;cursor:grab}#hero-canvas:active{cursor:grabbing}.hero-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:12px;color:var(--color-text-muted);letter-spacing:.3px;pointer-events:none}.projects__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg);gap:var(--space-md);flex-wrap:wrap}.projects__title{font-size:1rem;font-weight:400;color:var(--color-text-muted);letter-spacing:2px;text-transform:uppercase}.projects{padding-block:2rem 1.5rem}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;margin-bottom:2.5rem;place-items:center}.card{height:20rem;width:100%;position:relative;cursor:pointer}.card__backing{position:absolute;top:16px;left:16px;width:100%;height:100%;border:.5px solid var(--color-border-mid);border-radius:var(--radius-lg);background-color:var(--color-surface-deep);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M 10 0 L 0 0 0 10' fill='none' stroke='%23252523' stroke-width='0.5'/%3E%3C/svg%3E");background-size:10px 10px}.card__backing--green{border-color:#33d17a66;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M 10 0 L 0 0 0 10' fill='none' stroke='%2333D17A' stroke-width='0.5' opacity='0.3'/%3E%3C/svg%3E")}.card__backing--blue{border-color:#3fa0e066;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M 10 0 L 0 0 0 10' fill='none' stroke='%233FA0E0' stroke-width='0.5' opacity='0.3'/%3E%3C/svg%3E")}.card__backing--amber{border-color:#e8a33d66;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M 10 0 L 0 0 0 10' fill='none' stroke='%23E8A33D' stroke-width='0.5' opacity='0.3'/%3E%3C/svg%3E")}.card__front{height:20rem;position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s}.card__thumb{height:50%;flex-shrink:0;background:var(--color-bg);display:block;border-bottom:.5px solid var(--color-border-subtle);overflow:hidden;position:relative}.card-thumb-canvas{display:block;width:100%;height:100%}.card__body{padding:8px 10px;overflow:hidden}.card__index{font-size:14px;color:var(--color-text-secondary)}.card__title{font-size:16px;font-weight:500;color:var(--color-text-primary);margin-bottom:2px}.card__desc{font-size:12px;color:var(--color-text-secondary);line-height:1.6;line-clamp:2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card__actions{display:flex;justify-content:space-between;align-items:center;padding:6px 10px 8px;margin-top:auto}.card__source{font-size:14px;color:var(--color-text-muted);padding:2px 4px;border:.5px solid var(--color-border-mid);border-radius:var(--radius-sm)}.card__live{color:var(--color-text-muted);transition:color .2s;line-height:1}.card:hover .card__front{border-color:var(--color-green)}.card:hover .card__live{color:var(--color-green)}.pagination{display:flex;justify-content:center;align-items:center;gap:var(--space-md);font-size:14px;color:var(--color-text-muted);margin-bottom:2rem}.pagination__prev,.pagination__next{font-size:14px;color:var(--color-text-muted);transition:color .2s}.pagination__prev:hover:not(:disabled),.pagination__next:hover:not(:disabled){color:var(--color-green)}.pagination__prev:disabled,.pagination__next:disabled{opacity:.3;cursor:default}.detail-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;margin-bottom:2rem}.detail-card{position:relative;height:360px;width:96%;max-width:960px}.detail-card__backing{position:absolute;top:14px;left:14px;width:100%;height:100%;border-radius:var(--radius-lg);background-color:var(--color-surface-deep);background-size:14px 14px;border:1px solid var(--accent)}.detail-card__front{position:absolute;inset:0;background:var(--color-surface);border:.5px solid var(--color-border);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--color-text-faint)}.detail-card__front img{width:100%;height:100%;object-fit:cover}.detail-meta{display:flex;flex-direction:column}.detail-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-md);flex-wrap:wrap}#detail-preview{width:100%;height:100%}.detail-index{color:var(--color-text-secondary);font-size:1rem}.stack-label{color:var(--color-text-muted)}.stack-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--space-md)}.stack-pill{font-size:11px;color:var(--color-text-secondary);border:.5px solid var(--color-border-mid);padding:4px 9px;border-radius:var(--radius-sm)}.site-footer{padding-bottom:2rem}.footer-art{position:relative;width:100%;height:120px;overflow:hidden;border-radius:var(--radius-lg);margin-bottom:var(--space-md)}#footer-canvas{position:absolute;inset:0;width:100%;height:100%}.footer-wordmark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;user-select:none}.footer-wordmark__main{font-size:clamp(2rem,2vw,3rem);font-weight:700;letter-spacing:4px;color:var(--color-text-primary)}.footer-wordmark__sub{font-size:.875rem;font-weight:400;letter-spacing:3px;color:var(--color-text-muted);margin-left:8px;align-self:flex-end;padding-bottom:3px}.footer-bottom{border-top:.5px solid var(--color-border-subtle);padding-top:var(--space-md);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.footer-socials{display:flex;gap:var(--space-md)}.footer-socials a{font-size:1.25rem;color:var(--color-text-muted);transition:color .2s}.footer-socials a:hover{color:var(--color-text-secondary)}.footer-credit{font-size:14px;color:var(--color-text-faint);display:flex;flex-direction:column;align-items:center;gap:6px}.footer-heart{display:inline-flex;align-items:center;line-height:1}.about-intro{display:flex;align-items:center;gap:var(--space-lg);margin-bottom:2rem}.about-mini-sandbox{width:120px;height:120px;flex-shrink:0;border-radius:var(--radius-lg);overflow:hidden;background:radial-gradient(circle at 50% 40%,#121210 0%,var(--color-bg) 70%)}.about-mini-sandbox canvas{width:100%;height:100%}.about-intro__text{flex:1}.about-intro__text .page-desc{margin-bottom:0}.page-title{font-size:2.25rem;font-weight:500;color:var(--color-text-primary);margin-bottom:var(--space-sm)}.page-desc{max-width:960px;font-size:.875rem;color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--space-lg)}.page-section{width:100%;max-width:960px;background:var(--color-surface);border:.5px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:6rem}.page-section__label{font-size:1rem;color:var(--color-green);margin-bottom:var(--space-xs);letter-spacing:.5px}.page-section__body{font-size:.875rem;color:var(--color-text-secondary);line-height:1.6}.page-section__body--spaced{margin-top:1.25rem}#contact-form{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.325rem}.field{width:100%;max-width:960px;background:var(--color-surface);border:.5px solid var(--color-border);color:var(--color-text-primary);font-family:var(--font-mono);font-size:16px;padding:14px 12px;border-radius:var(--radius-md);outline:none;transition:border-color .2s;display:block;margin-bottom:var(--space-sm);resize:none}.field:focus{border-color:var(--color-green)}.field::placeholder{color:var(--color-text-muted)}.form-status{font-family:var(--font-mono);font-size:12px;margin-top:1rem;min-height:1.2rem;transition:color .2s ease;color:transparent}.form-status--success{color:var(--color-green)}.form-status--error{color:#f55}@media(max-width:1240px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-grid{grid-template-columns:1fr}}@media(max-width:600px){.site-nav{overflow-x:hidden;justify-content:space-between;gap:1rem}.card{max-width:26rem}.brand{font-size:1rem}.nav-pill{font-size:12px;padding:5px 10px}.about-intro{flex-direction:column;align-items:flex-start}.about-grid,.card-grid{grid-template-columns:1fr}.footer-wordmark__main{font-size:1.5rem}}.filter-row{display:none;gap:var(--space-xs);flex-wrap:wrap}.filter-pill{font-size:11px;font-family:var(--font-mono);color:var(--color-text-muted);border:.5px solid var(--color-border-mid);padding:4px 12px;border-radius:var(--radius-pill);transition:border-color .2s,color .2s;background:none;cursor:pointer}.filter-pill:hover{color:var(--color-text-primary);border-color:var(--color-text-muted)}.filter-pill--active{color:var(--color-green);border-color:var(--color-green)}