.project-filter{flex-wrap:wrap;gap:6px;margin:8px 0 20px;padding:0;list-style:none;display:flex}.project-cards{grid-template-columns:1fr;gap:20px;margin:0;padding:0;list-style:none;display:grid}.project-card{border:1px solid var(--line);background:var(--bg);transition:border-color var(--ease);border-radius:10px;flex-direction:column;display:flex;overflow:hidden}.project-card:hover{border-color:var(--line-strong)}.project-card .thumb{aspect-ratio:16/9;object-fit:cover;object-position:top left;border:0;border-bottom:1px solid var(--line);background:var(--panel);border-radius:0;flex:none;width:100%;height:auto;display:block}.project-card .thumb.img-ph{text-align:center;background:repeating-linear-gradient(135deg, var(--panel) 0 14px, #eff1f4 14px 28px);flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:12px;display:flex}.project-card .thumb.img-ph .ph-title{font-family:var(--font-sans);color:var(--ink-2);font-size:14px}.project-card .card-body{flex-direction:column;flex:1;gap:8px;padding:16px 18px 18px;display:flex}.project-card .head{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.project-card h2{font-family:var(--font-head);font-size:17px;font-weight:var(--head-weight);letter-spacing:var(--head-tracking);word-spacing:var(--head-word-spacing);margin:0 2px 0 0;line-height:1.35}.project-card h2 a{text-decoration:none}.project-card h2 a:hover{color:var(--accent)}.project-card .desc{color:var(--ink-2);margin:0;font-size:14.5px}.project-card .desc.is-placeholder{color:var(--ink-3);font-style:italic}.project-card .stack{border-top:1px dashed var(--line);margin:0;padding-top:10px}.project-card .foot{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px 12px;margin-top:auto;padding-top:4px;display:flex}.project-card .project-link{border:1px solid var(--line-strong);border-radius:var(--radius);font-family:var(--font-meta);color:var(--ink);white-space:nowrap;transition:border-color var(--ease), color var(--ease), background var(--ease);background:0 0;align-items:center;gap:6px;padding:6px 12px;font-size:13px;line-height:1.3;text-decoration:none;display:inline-flex}.project-card .project-link:hover{border-color:var(--accent);color:var(--accent)}.project-card .project-link.is-external{color:var(--accent)}.project-card .project-muted{font-family:var(--font-meta);color:var(--ink-3);align-items:center;gap:6px;padding:6px 0;font-size:13px;display:inline-flex}.project-card .project-muted:before{content:"";box-sizing:border-box;border:1.5px solid;border-radius:3px;width:10px;height:10px}@media (width>=720px){.project-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}main.project-main{width:100%}.project-column{width:var(--wrap);margin:0 auto}.project-head{margin-bottom:28px}.project-head h1{font-family:var(--font-head);font-size:clamp(24px,3.4vw,30px);font-weight:var(--head-weight);letter-spacing:var(--head-tracking);word-spacing:var(--head-word-spacing);margin:0 0 12px;line-height:1.32}.project-head .badges{flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex}.project-body .table-scroll{margin:0 0 20px;overflow-x:auto}.project-body table{font-size:14px}.project-body td img{border:1px solid var(--line);background:var(--panel);border-radius:4px;width:120px;max-width:none;height:auto;display:block}.project-body table.steps td:first-child{font-family:var(--font-mono);color:var(--ink-3);font-size:12.5px}.revisions{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);max-width:700px;margin:0 0 28px;padding:12px 16px}.revisions h2{font-family:var(--font-meta);letter-spacing:.02em;color:var(--ink-3);margin:0 0 8px;font-size:12.5px;font-weight:600}.revisions ol{gap:4px;margin:0;padding:0;list-style:none;display:grid}.revisions li{color:var(--ink-2);grid-template-columns:92px 1fr;gap:0 12px;font-size:13.5px;line-height:1.6;display:grid}.revisions time{font-family:var(--font-mono);color:var(--ink-3);font-size:12.5px}.project-head .links{flex-wrap:wrap;gap:8px;margin:14px 0 0;display:flex}.project-head .links a{border:1px solid var(--line-strong);border-radius:var(--radius);font-family:var(--font-meta);color:var(--accent);align-items:center;gap:6px;padding:6px 12px;font-size:13px;text-decoration:none;display:inline-flex}.project-head .links a:hover{border-color:var(--accent)}.project-body{max-width:700px}.project-body h2{font-family:var(--font-head);font-size:17px;font-weight:var(--head-weight);letter-spacing:var(--head-tracking);word-spacing:var(--head-word-spacing);margin:40px 0 12px;line-height:1.4}.project-body>h2:first-child{margin-top:0}.project-body p{color:var(--ink);margin:0 0 16px;font-size:15.5px;line-height:1.8}.project-body ul{margin:0 0 18px;padding-left:22px}.project-body li{margin:4px 0;font-size:15.5px}.project-body li::marker{color:var(--ink-3)}.project-body :not(pre)>code{background:var(--code-bg);border:1px solid var(--line);border-radius:var(--radius);padding:1px 5px}.project-body .no-link{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin-top:8px;padding:14px 16px}.project-body .no-link h2{margin:0 0 6px}.project-body .no-link p{color:var(--ink-2);margin:0;font-size:14.5px}.related{border-top:1px solid var(--line);font-family:var(--font-meta);font-size:var(--meta-size);color:var(--ink-3);margin:28px 0 0;padding-top:18px}.related a{color:var(--accent);text-decoration:none}.related a:hover{text-underline-offset:3px;text-decoration:underline}main.project-main{container-type:inline-size}.shots{grid-template-columns:1fr;gap:20px;width:min(1000px,100cqw - 40px);margin:28px 0 36px calc(max(20px,50cqw - 500px) - 50cqw + min(360px,50cqw - 20px));display:grid}.shots figure{min-width:0;margin:0}.shots img,.shots video{width:100%;height:auto;display:block}.shots .img-ph{text-align:center;background:repeating-linear-gradient(135deg, var(--panel) 0 14px, #eff1f4 14px 28px);flex-direction:column;gap:6px;padding:12px}.shots .img-ph .ph-title{font-family:var(--font-sans);color:var(--ink-2);font-size:13px}.shots figcaption{text-align:left}.shots img{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);width:100%;height:auto;display:block}.shots .pair{flex-wrap:wrap;align-items:flex-start;gap:16px;display:flex}.shots .pair img{width:auto;max-width:calc(50% - 8px);max-height:378px}.shots figure.is-narrow{grid-column:1/-1;justify-self:center;width:min(360px,100%)}.shots figure.is-narrow img{max-width:360px}.shots figure.is-narrow figcaption{text-align:center}@media (width>=880px){.shots{grid-template-columns:1fr 1fr}.shots figure.is-wide{grid-column:1/-1}}.link-logo{flex:none;display:block}.project-guide{z-index:19;bottom:max(0px, env(safe-area-inset-bottom));pointer-events:none;width:660px;height:336px;transition:transform .48s;animation:.62s cubic-bezier(.2,.8,.2,1) both guide-rise;position:fixed;left:64px}.project-guide-bubble{aspect-ratio:680/440;pointer-events:none;width:380px;transition:width .26s;position:absolute;bottom:20px;left:175px}.project-guide-chat-open .project-guide-bubble{width:min(570px,92dvh);left:140px}.project-guide-art{filter:drop-shadow(0 3px 7px #1c2f241f);width:100%;height:100%;display:block;position:absolute;inset:0;overflow:visible}.project-guide-art-expanded,.project-guide-art-mobile,.project-guide-chat-open .project-guide-art-desktop{display:none}.project-guide-chat-open .project-guide-art-expanded{display:block}.project-guide-copy{color:var(--ink);font-family:var(--font-sans);text-align:center;pointer-events:auto;flex-direction:column;justify-content:center;align-items:center;font-size:14.5px;line-height:1.45;display:flex;position:absolute;inset:10% 7% 29% 28%;overflow:auto}.project-guide-projects .project-guide-copy{font-size:13.5px}.project-guide-copy p{color:inherit;font-size:inherit;line-height:inherit;margin:0}.project-guide-ask{color:inherit;text-underline-offset:3px;background:0 0;border:0;align-items:center;gap:4px;margin-top:7px;padding:0;font-size:.92em;text-decoration:underline;display:inline-flex}.project-guide-ask:hover{color:var(--accent)}.project-guide-chat{z-index:1;color:var(--ink);font-family:var(--font-sans);pointer-events:auto;flex-direction:column;gap:8px;padding:4px;display:flex;position:absolute;inset:11% 7% 24% 28%}.project-guide-chat-heading{color:#315343;justify-content:space-between;align-items:center;gap:8px;font-size:15px;font-weight:700;display:flex}.project-guide-chat-heading button{color:inherit;font:inherit;text-underline-offset:2px;background:0 0;border:0;padding:2px 5px;font-size:12px;text-decoration:underline}.project-guide-chat-history{overscroll-behavior:contain;flex-direction:column;flex:1;gap:6px;min-height:0;font-size:14px;line-height:1.5;display:flex;overflow:auto}.project-guide-chat-history p{white-space:pre-wrap;overflow-wrap:anywhere;max-width:96%;margin:0}.project-guide-chat-history .is-user{background:#3153431a;border-radius:10px 10px 3px;align-self:flex-end;padding:5px 8px}.project-guide-chat-hint{color:var(--muted);text-align:center;align-self:center;margin:auto 0!important}.project-guide-chat-pending{color:var(--muted)}.project-guide-chat-form{flex:none;gap:6px;display:flex}.project-guide-chat-form input{width:100%;min-width:0;height:34px;color:var(--ink);font:inherit;background:#fffdf5;border:1px solid #31534359;border-radius:999px;padding:0 11px;font-size:13px}.project-guide-chat-form input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.project-guide-chat-form button{color:#fff;background:#315343;border:0;border-radius:50%;flex:0 0 34px;width:34px;height:34px;padding:0;font-size:18px;line-height:1}.project-guide-chat-form button:disabled{opacity:.45}.project-guide-trigger{z-index:2;pointer-events:auto;background:0 0;border:0;width:288px;height:336px;padding:0;display:block;position:absolute;bottom:0;left:0}.project-guide-person{object-fit:contain;object-position:left bottom;pointer-events:none;filter:drop-shadow(0 3px 5px #1419161a);width:288px;height:336px;transition:transform .18s;display:block;position:absolute;bottom:0;left:0}.project-guide-trigger:hover .project-guide-person,.project-guide-trigger:focus-visible .project-guide-person{transform:translateY(-2px)}.project-guide-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}.project-guide-active .chat-trigger,body:has(.project-guide) .chat-trigger{display:none}.guide-footer-active .project-guide{transform:translateY(calc(100% + 24px))}@keyframes guide-rise{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@media (width<=600px){.project-guide{width:100vw;height:187px;left:0}.project-guide-trigger{width:160px;height:187px;left:16px}.project-guide-person{width:160px;height:187px;left:0}.project-guide-bubble{width:min(366px,100vw - 24px);bottom:160px;left:12px}.project-guide-art-desktop,.project-guide-chat-open .project-guide-art-expanded{display:none}.project-guide-art-mobile{display:block}.project-guide-chat-open .project-guide-bubble{width:min(366px,100vw - 24px);left:12px}.project-guide-copy,.project-guide-projects .project-guide-copy{font-size:13px}.project-guide-chat{gap:5px;inset:12% 7% 24% 28%}.project-guide-chat-heading{font-size:13px}.project-guide-chat-history{font-size:12px}.project-guide-chat-form input,.project-guide-chat-form button{height:30px}.project-guide-chat-form button{flex-basis:30px;width:30px}}@media (prefers-reduced-motion:reduce){.project-guide,.project-guide-bubble,.project-guide-person{transition:none;animation:none}}