*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: oklch(98.5% .002 247.839);--surface: #ffffff;--border: oklch(92% .004 247.839);--text-primary: oklch(13% .028 261.692);--text-secondary: oklch(37.3% .034 259.733);--accent: #E53935;--accent-hover: #C62828;--nav-bg: rgba(251, 251, 253, .85);--sticky-yellow: #FFF9C4;--sticky-coral: #FFCCBC;--sticky-blue: #BBDEFB;--sticky-green: #C8E6C9;--font-display: "Chillax", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--sp-7: 48px;--sp-8: 64px;--sp-9: 80px;--sp-10: 120px;--sp-section: 128px;--content-width: 720px;--site-width: 1120px;--nav-height: 64px}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);font-size:1rem;line-height:1.7;color:var(--text-primary);background:var(--bg);overflow-x:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}.container{max-width:var(--site-width);margin:0 auto;padding:0 var(--sp-5)}.content-width{max-width:var(--content-width);margin:0 auto;padding:0 var(--sp-5)}h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;color:var(--text-primary)}.text-hero{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4.5rem);font-weight:600;line-height:1.05;color:var(--text-primary);letter-spacing:-.02em}.text-section{font-family:var(--font-display);font-size:1.75rem;font-weight:600}.text-meta{font-family:var(--font-body);font-size:.8125rem;font-weight:400;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.text-secondary{color:var(--text-secondary)}.link-animated{position:relative;display:inline;background-image:linear-gradient(var(--accent),var(--accent));background-size:0% 1px;background-repeat:no-repeat;background-position:left bottom;transition:background-size .3s ease;padding-bottom:2px}.link-animated:hover{background-size:100% 1px}.section-heading{display:inline-flex;align-items:center;gap:var(--sp-3);font-family:var(--font-display);font-size:1.75rem;font-weight:600;margin-bottom:var(--sp-7)}.section-heading:after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}.card{background:transparent;border-radius:12px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;cursor:pointer;text-decoration:none;display:block}.card:hover{transform:translateY(-4px);box-shadow:0 8px 32px #00000014}.card-image{aspect-ratio:16 / 9;overflow:hidden;border:1px solid var(--border);border-radius:12px}.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.card:hover .card-image img{transform:scale(1.02)}.card-body{padding:var(--sp-4) 0}.card-title{font-family:var(--font-display);font-size:1.125rem;font-weight:500;margin-bottom:var(--sp-1)}.card-meta{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2)}.card-summary{font-size:.875rem;color:var(--text-secondary);opacity:0;max-height:0;overflow:hidden;transition:opacity .2s ease,max-height .2s ease}.card:hover .card-summary{opacity:1;max-height:40px}.badge{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;font-weight:500}.badge-shipped{color:var(--text-secondary)}.badge-in-progress{color:var(--accent)}.badge-archived{color:var(--text-secondary);opacity:.6}.pill{display:inline-flex;align-items:center;background:var(--bg);border:1px solid var(--border);font-size:.8125rem;padding:4px 12px;border-radius:999px;color:var(--text-secondary)}.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-height);background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-5);transition:opacity .3s ease}.nav-logo{font-family:var(--font-display);font-size:1rem;letter-spacing:.02em;font-weight:600;color:var(--text-primary)}.nav-links{display:flex;gap:var(--sp-6);list-style:none}.nav-link{font-family:var(--font-body);font-size:.875rem;letter-spacing:.02em;color:var(--text-secondary);position:relative;transition:color .2s ease;padding-bottom:var(--sp-2)}.nav-link:hover,.nav-link.active{color:var(--text-primary)}.nav-link.active:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:6px;height:6px;border-radius:50%;background:var(--accent)}.fade-in{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}.fade-in.visible{opacity:1;transform:translateY(0)}.hero-section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.hero-definition{max-width:540px}.hero-word{font-family:var(--font-display);font-size:clamp(3rem,6vw,5rem);font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--text-primary);margin-bottom:var(--sp-2)}.hero-saas{font-weight:700;font-style:italic}.hero-phonetic{font-family:var(--font-body);font-size:1.125rem;font-style:italic;color:var(--text-secondary);margin-bottom:var(--sp-3)}.hero-pos{font-family:var(--font-body);font-size:.875rem;font-style:italic;color:var(--text-secondary);margin-bottom:var(--sp-4)}.hero-meaning{font-family:var(--font-body);font-size:1.125rem;line-height:1.7;color:var(--text-secondary);margin-bottom:var(--sp-5)}.hero-attribution{font-family:var(--font-body);font-size:.9375rem;font-style:italic;color:var(--text-secondary)}.fade-up-on-load{animation:fadeUpIn .8s ease both}@keyframes fadeUpIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.chevron{color:var(--text-secondary);animation:pulse 2s ease infinite}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}.lab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-5)}.lab-whiteboard{display:flex;flex-wrap:wrap;gap:var(--sp-5);position:relative;min-height:400px}.sticky-card{display:block;width:280px;background:var(--sticky-bg, var(--sticky-yellow));border-radius:4px;box-shadow:2px 3px 12px #00000014,0 1px 3px #0000000a;text-decoration:none;color:var(--text-primary);transition:box-shadow .2s ease,transform .2s ease;user-select:none;position:relative}.sticky-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:#0000000f;border-radius:4px 4px 0 0}.sticky-card:hover:not(.is-dragging){box-shadow:4px 6px 20px #0000001f,0 2px 6px #0000000f;transform:translateY(-3px) rotate(-.5deg)}.sticky-card.is-dragging{cursor:grabbing;box-shadow:6px 10px 28px #00000029,0 3px 8px #00000014;z-index:10}.sticky-card:active{cursor:grabbing}.sticky-card-inner{padding:var(--sp-5)}.sticky-card-meta{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}.sticky-card-title{font-family:var(--font-display);font-size:1.125rem;font-weight:600;line-height:1.3;margin-bottom:var(--sp-2)}.sticky-card-summary{font-size:.8125rem;color:var(--text-secondary);line-height:1.5;margin-bottom:var(--sp-3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.sticky-card-tech{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2)}.sticky-card-tech .pill{font-size:.6875rem;padding:2px 8px;background:#fff9;border-color:#00000014}@media(max-width:768px){.sticky-card{width:100%}}.ghost-card{border:2px dashed var(--border);border-radius:12px;padding:var(--sp-8) var(--sp-5);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:.875rem;min-height:200px}.writing-item{display:flex;justify-content:space-between;align-items:baseline;padding:var(--sp-5) 0;border-bottom:1px solid var(--border);gap:var(--sp-5)}.writing-item:last-child{border-bottom:none}.writing-item-title{font-size:1rem;font-weight:500;transition:color .2s ease}.writing-item-title:hover{color:var(--accent)}.writing-item-summary{font-size:.9375rem;color:var(--text-secondary);margin-top:var(--sp-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.interlude{padding:var(--sp-9) 0;text-align:center}.interlude-text{font-family:var(--font-display);font-style:italic;font-size:clamp(1.5rem,3vw,2.25rem);font-weight:400;color:var(--text-primary);max-width:640px;margin:0 auto;line-height:1.5}.signoff{padding:var(--sp-10) 0;text-align:center}.signoff-text{font-family:var(--font-display);font-style:italic;font-size:1.5rem;font-weight:400;margin-bottom:var(--sp-6)}.social-links{display:flex;gap:var(--sp-5);justify-content:center;align-items:center}.social-link{color:var(--text-secondary);transition:color .2s ease;display:flex}.social-link:hover{color:var(--accent)}.social-link svg{width:20px;height:20px}.detail-header{padding-top:var(--sp-section);margin-bottom:var(--sp-8)}.detail-back{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--sp-7);transition:color .2s ease}.detail-back:hover{color:var(--text-primary)}.detail-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:600;margin-bottom:var(--sp-4);line-height:1.1;letter-spacing:-.02em}.detail-summary{font-size:1.125rem;color:var(--text-secondary);line-height:1.6;margin-bottom:var(--sp-5)}.detail-meta{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}.detail-meta .pill{font-size:.75rem;padding:3px 10px}.detail-links{display:flex;gap:var(--sp-5);margin-top:var(--sp-5)}.detail-link{font-size:.875rem;font-weight:500;color:var(--text-secondary);transition:color .2s ease}.detail-link:hover{color:var(--accent)}.detail-hero-media{margin-top:var(--sp-7);border-radius:12px;overflow:hidden;box-shadow:0 4px 24px #0000000f}.detail-hero-media img,.detail-hero-media video{width:100%;display:block}.embed-section{margin:var(--sp-8) 0}.embed-frame{width:100%;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}.embed-frame iframe{width:100%;height:600px;border:none;display:block}.embed-link-card{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5) var(--sp-6);background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:border-color .2s ease}.embed-link-card:hover{border-color:var(--accent)}.diary-entries{margin-top:var(--sp-8)}.diary-entry{padding:var(--sp-8) 0}.diary-entry+.diary-entry{border-top:1px solid var(--border)}.diary-entry-date{font-size:.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:var(--sp-2)}.diary-entry-title{font-family:var(--font-display);font-size:clamp(1.5rem,2.5vw,1.875rem);font-weight:600;line-height:1.2;margin-bottom:var(--sp-3)}.diary-entry-tools{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-5)}.diary-entry-tools .pill{font-size:.6875rem;padding:2px 8px;opacity:.8}.media-gallery{margin:var(--sp-6) 0}.media-gallery img{width:100%;border-radius:12px;box-shadow:0 2px 16px #0000000f;transition:transform .3s ease,filter .3s ease}.media-gallery img:hover{transform:scale(1.01)}.media-gallery figcaption{font-size:.8125rem;color:var(--text-secondary);text-align:center;margin-top:var(--sp-3)}.media-gallery-grid{display:grid;gap:var(--sp-4)}.media-gallery-grid[data-cols="2"]{grid-template-columns:repeat(2,1fr)}.media-gallery-grid[data-cols="3"]{grid-template-columns:repeat(3,1fr)}.media-frame-device{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:var(--sp-3)}.media-frame-device img{border-radius:8px}.media-frame-browser{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}.media-frame-browser:before{content:"";display:block;height:32px;background:var(--bg);border-bottom:1px solid var(--border)}.media-frame-browser img{border-radius:0}.markdown-content h2{font-size:1.375rem;margin-top:var(--sp-8);margin-bottom:var(--sp-4)}.markdown-content h3{font-size:1.125rem;margin-top:var(--sp-6);margin-bottom:var(--sp-3)}.markdown-content p{margin-bottom:var(--sp-5);line-height:1.75}.markdown-content img{width:100%;border-radius:12px;margin:var(--sp-6) 0}.markdown-content .video-embed,.markdown-content .demo-embed{position:relative;width:100%;padding-bottom:56.25%;margin:var(--sp-6) 0;border-radius:12px;overflow:hidden;background:var(--surface);border:1px solid var(--border)}.markdown-content .video-embed iframe,.markdown-content .demo-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.markdown-content video{width:100%;border-radius:12px;margin:var(--sp-6) 0;background:var(--surface)}.markdown-content .screenshot{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:var(--sp-4);margin:var(--sp-6) 0}.markdown-content .screenshot img{margin:0;border-radius:8px}.markdown-content .screenshot .caption{font-size:.8125rem;color:var(--text-secondary);text-align:center;margin-top:var(--sp-3)}.markdown-content .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4);margin:var(--sp-6) 0}.markdown-content .gallery img{margin:0;border:1px solid var(--border)}.markdown-content figure{margin:var(--sp-6) 0}.markdown-content figure img{margin:0}.markdown-content figcaption{font-size:.8125rem;color:var(--text-secondary);text-align:center;margin-top:var(--sp-3)}.markdown-content blockquote{border-left:3px solid var(--accent);padding-left:var(--sp-5);margin:var(--sp-6) 0;color:var(--text-secondary);font-style:italic}.markdown-content code{background:#edeef0;padding:2px 6px;border-radius:4px;font-size:.875em}.markdown-content pre{background:#edeef0;border:1px solid var(--border);border-radius:8px;padding:var(--sp-5);overflow-x:auto;margin:var(--sp-6) 0}.markdown-content pre code{background:none;padding:0}.markdown-content a{color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;transition:text-decoration-color .2s ease}.markdown-content a:hover{text-decoration-color:var(--accent-hover)}.markdown-content ul,.markdown-content ol{padding-left:var(--sp-5);margin-bottom:var(--sp-5)}.markdown-content li{margin-bottom:var(--sp-2)}.tech-stack{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3);margin-bottom:var(--sp-5)}.page-header{padding-top:var(--sp-section);margin-bottom:var(--sp-8)}.page-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:600;letter-spacing:-.02em}.about-body p{margin-bottom:var(--sp-5);color:var(--text-primary);line-height:1.75}.not-found{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--sp-5)}.not-found-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.5rem);font-weight:600}.footer{padding:var(--sp-7) 0;text-align:center;font-size:.8125rem;color:var(--text-secondary);margin-top:var(--sp-9)}.recently-updated:after{content:"";position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse-dot 2s ease infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}.drag-hint{position:absolute;bottom:-28px;left:50%;transform:translate(-50%);font-size:.75rem;color:var(--text-secondary);opacity:.7;pointer-events:none;white-space:nowrap;animation:fadeUpIn .6s ease 1s both}.lightbox-overlay{position:fixed;inset:0;z-index:1000;background:#000000d9;display:flex;align-items:center;justify-content:center;cursor:zoom-out;animation:fadeIn .2s ease}.lightbox-overlay img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:0 8px 48px #0006}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.experiment-nav{display:flex;justify-content:space-between;align-items:stretch;gap:var(--sp-4);margin-top:var(--sp-9);padding-top:var(--sp-7);border-top:1px solid var(--border)}.experiment-nav-link{display:flex;flex-direction:column;gap:var(--sp-1);font-size:.875rem;color:var(--text-secondary);text-decoration:none;transition:color .2s ease;max-width:45%}.experiment-nav-link:hover{color:var(--text-primary)}.experiment-nav-link--next{text-align:right;margin-left:auto}.experiment-nav-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.experiment-nav-title{font-family:var(--font-display);font-weight:500;font-size:1rem;color:var(--text-primary)}.reading-time{font-size:.8125rem;color:var(--text-secondary)}*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.fade-in{opacity:1;transform:none}}@media(max-width:1080px){.lab-grid,.media-gallery-grid[data-cols="3"]{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){:root{--nav-height: 56px;--sp-section: 80px}.lab-grid{grid-template-columns:1fr}.writing-item{flex-direction:column;gap:var(--sp-1)}.detail-title,.page-title{font-size:2rem}.nav-links{gap:var(--sp-5)}.media-gallery-grid[data-cols="2"],.media-gallery-grid[data-cols="3"]{grid-template-columns:1fr}.diary-entry{padding:var(--sp-6) 0}.embed-frame iframe{height:400px}}