:root{--bg: #12141c;--panel: #1a1d29;--panel-2: #21243344;--border: #333649;--ink: #edeef4;--ink-dim: #8d92ab;--accent: #8fa0e6;--accent-flat: #2a3050;--coral: #ff9e8a;--coral-flat: #3a2620;--yellow: #ffd27d;--green: #9be89e;--pink: #ff9ecb;--font-display: "Space Grotesk", sans-serif;--font-body: "Inter", -apple-system, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--notch: 16px}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){color-scheme:dark}}:root[data-theme=dark]{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6;min-height:100vh;position:relative}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}body:after{content:"";position:fixed;inset:-140px auto auto -140px;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(143,160,230,.14),transparent 65%)}.star-a,.star-b{position:fixed;z-index:0;pointer-events:none;color:var(--ink-dim);font-family:var(--font-mono);font-size:14px;animation:drift 14s ease-in-out infinite}.star-a{top:16%;right:6%}.star-b{bottom:20%;left:4%;animation-delay:-7s;color:var(--coral)}@keyframes drift{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(-8px,-14px) rotate(8deg)}66%{transform:translate(10px,-4px) rotate(-6deg)}}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::selection{background:var(--accent);color:#12141c}img{max-width:100%}svg.icon{flex:0 0 auto}.wrap{max-width:700px;margin:0 auto;padding:44px 20px 90px;position:relative;z-index:1}header.site{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-bottom:18px;margin-bottom:34px;border-bottom:2px solid var(--border)}.wordmark{font-family:var(--font-display);font-weight:700;font-size:1.25rem;display:flex;align-items:center;gap:8px}.wordmark .dim{color:var(--ink-dim);font-weight:500}.logo-svg{width:20px;height:20px;object-fit:cover;border-radius:50%;border:2px solid var(--coral);transition:transform .3s ease}.wordmark:hover .logo-svg{transform:rotate(-12deg) scale(1.15)}nav.tabs{display:flex;gap:22px}nav.tabs button{position:relative;font-family:var(--font-mono);font-weight:500;font-size:.88rem;color:var(--ink-dim);background:none;border:none;cursor:pointer;padding:4px 0}nav.tabs button:after{content:"";position:absolute;left:0;right:0;bottom:-19px;height:2px;background:var(--accent);transform:scaleX(0) skew(-14deg);transition:transform .18s ease}nav.tabs button:hover{color:var(--coral)}nav.tabs button[aria-selected=true]{color:var(--accent)}nav.tabs button[aria-selected=true]:after{transform:scaleX(1) skew(-14deg)}.card{background:var(--panel);border:2px solid var(--border);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%);padding:22px}.card+.card{margin-top:16px}.profile{display:flex;gap:20px}.avatar-frame{flex:0 0 auto;position:relative;width:92px;height:92px;border-radius:50%;background:var(--accent-flat);border:2px solid var(--coral);animation:bob 3.5s ease-in-out infinite;overflow:hidden}.avatar-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.avatar-frame:after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px #12141c8c}.shark-wave{position:absolute;right:-6px;bottom:-4px;z-index:2;width:28px;height:28px;display:grid;place-items:center;font-size:16px;background:var(--coral);border-radius:50%;border:2px solid var(--bg);box-shadow:0 1px 0 var(--border);transform-origin:bottom left;transition:transform .25s ease}.avatar-frame:hover .shark-wave{transform:rotate(-32deg) scale(1.2)}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.profile-body h1{margin:0 0 6px;font-family:var(--font-display);font-size:1.35rem}.profile-body h1 .name{color:var(--accent)}.profile-body p.bio{margin:0 0 14px;color:var(--ink-dim);max-width:52ch}.profile-links{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:14px}.profile-links a{color:var(--ink);font-size:.9rem;font-weight:600;display:inline-flex;align-items:center;gap:7px;border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease,transform .15s ease}.profile-links a:hover{color:var(--coral);border-color:var(--coral);text-decoration:none;transform:translateY(-2px)}.clicker{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--panel-2);border:1px solid var(--border);padding:10px 14px}.tap-btn{position:relative;font-family:var(--font-mono);font-weight:600;font-size:.82rem;color:var(--bg);background:var(--coral);border:none;padding:8px 14px;cursor:pointer;transition:background .15s ease,transform .1s ease}.tap-btn:hover{background:var(--yellow)}.tap-btn:active{transform:scale(.92)}.tap-btn.bounce{animation:bounce .35s ease}@keyframes bounce{0%{transform:scale(1)}30%{transform:scale(1.25) rotate(-4deg)}60%{transform:scale(.9) rotate(3deg)}to{transform:scale(1)}}.tap-count{font-size:.85rem;color:var(--ink-dim);font-family:var(--font-mono)}.tap-count b{color:var(--accent);font-size:1rem}.tap-flavor{width:100%;font-size:.8rem;color:var(--ink-dim)}.float-plus{position:absolute;top:-4px;left:50%;transform:translate(-50%);font-weight:700;font-size:.7rem;color:var(--yellow);font-family:var(--font-mono);pointer-events:none;animation:floatup .7s ease-out forwards}@keyframes floatup{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-22px)}}.banner{display:flex;gap:12px;align-items:flex-start}.banner-icon{flex:0 0 auto;width:22px;height:auto;margin-top:2px;filter:grayscale(.4) brightness(1.2);opacity:.9;animation:hammer-swing 5s ease-in-out infinite;transform-origin:top center}.banner:hover .banner-icon{filter:none;opacity:1}@keyframes hammer-swing{0%,88%,to{transform:rotate(0)}91%{transform:rotate(28deg)}94%{transform:rotate(-6deg)}97%{transform:rotate(14deg)}}.banner p{margin:0;color:var(--ink-dim);font-size:.92rem;padding-top:1px}.banner b{color:var(--yellow);font-weight:700}.section-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-weight:600;font-size:.82rem;letter-spacing:.03em;color:var(--accent);background:var(--accent-flat);border:1px solid var(--border);padding:6px 12px;clip-path:polygon(0 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px));margin:34px 0 12px;transform:rotate(-.6deg);transition:transform .2s ease}.section-label:hover{transform:rotate(.6deg) scale(1.03)}.feature-row{display:flex;gap:16px}.feature-cover-link{flex:0 0 auto;display:block;align-self:flex-start}.feature-cover{width:140px;height:108px;object-fit:cover;border:2px solid var(--border);display:block;transition:transform .22s ease,border-color .22s ease}.feature-cover-link:hover .feature-cover{transform:rotate(-2deg) scale(1.05);border-color:var(--coral)}.feature-body{flex:1;min-width:0}.feature-title{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin:0 0 6px}.feature-title a{color:var(--ink)}.feature-title a:hover{color:var(--coral);text-decoration:none}.feature-desc{color:var(--ink-dim);margin:0 0 14px;max-width:56ch;font-size:.92rem}.play-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-weight:600;font-size:.85rem;color:var(--bg);background:var(--accent);padding:9px 15px;transition:background .15s ease,transform .12s ease}.play-btn:hover{text-decoration:none;background:var(--green);transform:translate(3px)}.play-btn:active{transform:translate(0) scale(.95)}.next-up{margin-top:14px;display:flex;align-items:center;gap:6px;color:var(--ink-dim);font-size:.8rem;font-family:var(--font-mono)}.next-up-icon{width:14px;height:auto;filter:grayscale(.5)}.soon{color:var(--yellow);font-style:italic;animation:blink 1.4s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.45}}.vend-tag{display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-mono);font-size:.78rem;color:var(--ink-dim);text-align:center;margin-bottom:12px}.vend-tag b{color:var(--coral)}.john-embed{display:block;width:100%;max-width:728px;margin:0 auto;aspect-ratio:728 / 90;border:1px dashed var(--border);background:var(--panel-2);transition:border-color .2s ease,background .2s ease}.john-embed:hover{border-color:var(--coral);background:#3a262059}.empty-state{text-align:center;padding:30px 16px}.empty-state .slot{width:46px;height:46px;margin:0 auto 14px;font-size:24px;display:flex;align-items:center;justify-content:center;animation:bob 3s ease-in-out infinite}.empty-state .msg{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink)}.empty-state .sub{margin-top:5px;color:var(--ink-dim);font-size:.85rem;font-family:var(--font-mono)}.blog-item{display:block;padding:15px 0;border-bottom:1px solid var(--border)}.blog-item:last-child{border-bottom:none}.blog-item h3{margin:0 0 4px;font-size:1rem;color:var(--ink);font-family:var(--font-display)}.blog-item:hover h3{color:var(--accent)}.blog-item .meta{color:var(--ink-dim);font-size:.8rem;font-family:var(--font-mono)}.projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.project-card{display:block;background:var(--panel);border:2px solid var(--border);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%);color:inherit;transition:transform .18s ease,border-color .18s ease}.project-card:hover{border-color:var(--coral);text-decoration:none;transform:translateY(-3px)}.project-thumb{display:block;width:100%;height:140px;object-fit:cover;border-bottom:2px solid var(--border)}.project-card .p-body{padding:15px 16px}.project-card h3{margin:0 0 5px;font-size:.98rem;font-weight:700;font-family:var(--font-display)}.project-card:hover h3{color:var(--coral)}.project-card p{margin:0;color:var(--ink-dim);font-size:.85rem}.locked-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:150px;border:1px dashed var(--border);color:var(--ink-dim)}.locked-card:hover{border-color:var(--accent)}.locked-icon{width:20px;height:auto;opacity:.7;filter:grayscale(.4)}.locked-card:hover .locked-icon{opacity:1;transform:rotate(-10deg)}.locked-card span{font-size:.78rem;font-family:var(--font-mono)}.view{display:none}.view.active{display:block;animation:fadein .25s ease}@keyframes fadein{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}footer.site{margin-top:50px;text-align:center;color:var(--ink-dim);font-size:.8rem;font-family:var(--font-mono)}@media (max-width:520px){.profile,.feature-row{flex-direction:column}.feature-cover{width:100%;height:140px}.projects-grid{grid-template-columns:1fr}nav.tabs{gap:16px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}