@font-face{font-family:DepartureMono;src:url('./DepartureMono-Regular.woff2') format('woff2');font-display:swap;font-weight:400}
:root{color-scheme:dark;--bg:#161617;--text:#e6e6e8;--muted:#a0a0a6;--dim:#7f7f86;--line:#ffffff18;--pink:#e7adc3;--blue:#a4c9df;--sans:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei','Noto Sans CJK SC',system-ui,sans-serif;--mono:DepartureMono,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:104px}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.75 var(--sans);isolation:isolate;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:5px}button{touch-action:manipulation}svg{flex-shrink:0}::selection{background:#b5cddd38;color:#fff}img{max-width:100%;display:block}[hidden]{display:none!important}.mono{font-family:var(--mono);font-weight:400}.container{width:min(1060px,calc(100% - 64px));margin-inline:auto}.pixel-icon{width:15px;height:15px;fill:currentColor;shape-rendering:crispEdges;display:inline-block;vertical-align:-2px}.skip-link{position:fixed;left:20px;top:-100px;z-index:100;background:var(--text);color:#161617;padding:8px 16px;border-radius:5px}.skip-link:focus{top:16px}
.atmosphere{position:absolute;top:-200px;left:0;right:0;height:1100px;pointer-events:none;z-index:-2;overflow:hidden;background:radial-gradient(ellipse 100px 650px at 32% 0%,#aaaab42b,transparent 90%),radial-gradient(ellipse 95px 720px at 61% 0%,#aaaab424,transparent 88%);filter:blur(24px)}.atmosphere:before,.atmosphere:after{content:'';position:absolute;inset:-20%;pointer-events:none}.atmosphere:before{background:radial-gradient(ellipse 120px 680px at 30% 8%,#f0f0f11b,transparent 75%),radial-gradient(ellipse 145px 760px at 62% 10%,#d3d0d71c,transparent 78%);animation:light-drift 22s ease-in-out infinite alternate}.atmosphere:after{background:radial-gradient(ellipse 520px 260px at 50% 0%,#ffffff0c,transparent 75%);animation:light-breathe 12s ease-in-out infinite alternate}.page-grain{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.15;background:url('./grain-tile.png') repeat;background-size:128px 128px}.top-nav{height:81px;position:sticky;top:0;z-index:20;transition:background .2s,border-color .2s;border-bottom:1px solid transparent}.top-nav.scrolled{background:#161617d6;border-color:#ffffff10;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:inline-flex;align-items:center;gap:10px;font:11px var(--mono);letter-spacing:.06em;color:#bbbcc1}.brand-symbol{display:grid;place-items:center;width:25px;height:25px;border:1px solid #ffffff2b;border-radius:6px;color:#c5c6cd;background:#ffffff04}.brand-symbol .pixel-icon{width:15px;height:15px}.nav-links{display:flex;align-items:center;gap:26px;color:#aaaab0;font-size:12px}.nav-links a{transition:color .18s}.nav-links a:hover{color:#f1f1f3}.nav-links .nav-play{border:1px solid #ffffff27;padding:6px 11px;border-radius:6px;color:#d0d0d5;display:flex;align-items:center;gap:8px;transition:transform .2s,background .2s}.nav-play:hover{transform:translateY(-2px);background:#ffffff08}
.hero{position:relative;padding-top:94px;padding-bottom:74px;isolation:isolate}.hero-canvas{position:absolute;inset:0 0 auto;width:100%;height:410px;z-index:-1;mask-image:linear-gradient(to bottom,#000,transparent 96%);pointer-events:none}.eyebrow{font:9px/1.5 var(--mono);letter-spacing:.1em;color:#a3a3ac;display:flex;align-items:center;gap:10px}.eyebrow:before{content:'';width:20px;height:1px;background:#aaaab166}.hero-heading-row{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end;margin-top:24px}.hero h1{margin:0;font-size:clamp(40px,4.7vw,60px);line-height:1.32;font-weight:570;letter-spacing:-.055em}.hero h1 span{color:#afc7d6}.hero-intro{max-width:340px;padding-bottom:4px}.hero-intro p{margin:0;color:#aaaab2;font-size:13px;line-height:1.95}.text-link{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:#d0d0d7;transition:color .18s,gap .18s}.text-link:hover{color:var(--blue);gap:13px}.hero-intro .text-link{margin-top:22px}.hero-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:39px;color:#888891;font:9px var(--mono);letter-spacing:.03em}.hero-bottom .location{font-family:var(--sans);font-size:10px;letter-spacing:.1em}.status-dot{height:5px;width:5px;border-radius:50%;background:#a7b6aa;display:inline-block;margin-right:8px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:29px}.section-label{color:#8d8d98;font:9px/1.6 var(--mono);letter-spacing:.11em;margin:0 0 11px}.section-head h2{font-size:25px;line-height:1.5;font-weight:550;letter-spacing:-.035em;margin:0}.section-caption{font-size:12px;color:var(--muted);margin:0}.project-section{padding:27px 0 87px;border-top:1px solid var(--line)}.project-intro{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-bottom:26px}.project-intro h3{font-size:18px;font-weight:550;margin:0 0 7px}.project-intro h3 span{font:10px var(--mono);color:#9797a1;margin-left:13px}.project-intro p{font-size:12px;color:#a0a0aa;margin:0;max-width:540px;line-height:1.9}.project-actions{display:flex;align-items:center;gap:20px;flex-shrink:0}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:40px;padding:0 18px;border:1px solid #ffffff2a;border-radius:7px;background:#ffffff05;font-size:12px;color:#d7d7df;transition:transform .2s,background .2s,border-color .2s}.button:hover{transform:translateY(-2px);background:#ffffff0b;border-color:#ffffff42}.button:active{transform:translateY(0)}.button.primary{border-color:#d6b3c43b;background:#d6b3c410;color:#ead5de}.button.primary:hover{background:#d6b3c41a}.button .pixel-icon{width:13px;height:13px}
.mac-device{position:relative;width:calc(100% - 34px);margin:0 auto 34px;max-width:1000px}.mac-screen{position:relative;aspect-ratio:1.77;border:10px solid #080809;border-bottom-width:14px;border-radius:17px 17px 10px 10px;background:#25242b url('./wallpaper.svg') center/cover;box-shadow:0 0 0 1px #ffffff22,0 28px 60px -35px #000b;overflow:hidden}.mac-menubar{position:absolute;top:0;left:0;right:0;height:25px;display:flex;align-items:center;gap:16px;background:#ffffff08;border-bottom:1px solid #ffffff08;padding:0 13px;font-size:8px;color:#c4c1cc;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}.mac-menubar .pixel-icon{width:11px;height:11px}.mac-clock{margin-left:auto;font:7px var(--mono);letter-spacing:.04em}.mac-notch{position:absolute;z-index:3;left:50%;transform:translateX(-50%);top:-1px;width:195px;height:31px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:0 0 10px 10px;background:#080809;font:7px var(--mono);letter-spacing:.06em;color:#a4b2a9}.mac-notch i{width:4px;height:4px;background:#a4b2a9;border-radius:50%}.mac-lip{height:14px;width:calc(100% + 30px);margin-inline:-15px;background:linear-gradient(#555558,#2c2c2e 30%,#424245 65%,#171718);border-radius:2px 2px 50% 50%/2px 2px 100% 100%;box-shadow:0 10px 18px #0005;position:relative}.mac-lip:before{content:'';position:absolute;top:0;left:43%;width:14%;height:4px;border-radius:0 0 6px 6px;background:#242425;box-shadow:inset 0 -1px #ffffff26}.desktop-note{position:absolute;left:3.6%;top:28%;width:25%;z-index:4;padding:22px;background:#23232bb5;border:1px solid #ffffff24;border-radius:9px;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:0 15px 35px #0002;transition:transform .25s,border-color .2s}.desktop-note:hover{transform:translateY(-3px);border-color:#ffffff40}.desktop-note .pixel-icon{color:#b6c6cb;width:20px;height:20px;margin-bottom:13px}.desktop-note .note-label{font:7px var(--mono);letter-spacing:.06em;color:#c0bac9}.desktop-note strong{display:block;font-size:15px;font-weight:500;line-height:1.7;margin:10px 0}.desktop-note p{font-size:10px;line-height:1.8;color:#c2bdcd;margin:0}.desktop-note .note-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff16;padding-top:14px;margin-top:21px;color:#aaa6b5;font:7px var(--mono)}.project-window{position:absolute;right:4.5%;top:11%;width:72%;height:80%;background:#202125d4;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid #ffffff2c;border-radius:9px;overflow:hidden;box-shadow:0 18px 44px #05050855}.window-bar{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;gap:12px;border-bottom:1px solid #ffffff12;color:#9d9da7;font:7px var(--mono);background:#ffffff03}.traffic-lights{display:flex;gap:4px}.traffic-lights i{width:6px;height:6px;border-radius:50%;background:#b17676}.traffic-lights i:nth-child(2){background:#b39a70}.traffic-lights i:nth-child(3){background:#7d9b7f}.window-tools{color:#858590}.window-layout{display:flex;height:calc(100% - 30px)}.window-sidebar{width:137px;flex-shrink:0;border-right:1px solid #ffffff0a;background:#11111722;padding:22px 10px;font:7px/1.5 var(--mono);color:#93919f}.sidebar-title{letter-spacing:.12em;font-size:6px;color:#8b8798;padding:0 7px 12px}.file-row{display:flex;align-items:center;gap:7px;padding:8px 7px;margin:3px 0;border-radius:4px;white-space:nowrap}.file-row i{width:4px;height:4px;border-radius:1px;background:#8ea8a4}.file-row.active{background:#a3c4c411;color:#bfced0}.file-row:nth-of-type(3) i{background:#ba9baa}.file-row:nth-of-type(4) i{background:#b4a17c}.sidebar-foot{font-family:var(--sans);font-size:8px;color:#a8a4b3;border-top:1px solid #ffffff0d;margin:24px 7px 0;padding-top:13px;line-height:2}.window-body{min-width:0;flex:1;display:flex;flex-direction:column;padding:12px 15px 9px}.preview-score{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:8px;color:#b9b7c5;margin-bottom:8px}.preview-score strong{font:11px var(--mono);color:#e8d1db}.preview-score .mono{font-size:6px;color:#aaa7b7}.preview-link{display:block;position:relative;flex:1;min-height:0;overflow:hidden;border:1px solid #ffffff10;border-radius:4px;background:#191a1c}.preview-link img{width:100%;height:100%;object-fit:contain}.preview-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#10111688;opacity:0;transition:opacity .2s;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.preview-link:hover .preview-hint,.preview-link:focus-visible .preview-hint{opacity:1}.preview-hint span{font-size:12px;background:#25252ad6;border:1px solid #ffffff24;border-radius:6px;padding:9px 15px}.window-status{display:flex;align-items:center;justify-content:space-between;padding-top:7px;font:6px var(--mono);color:#93909f}.desktop-caption{position:absolute;bottom:4%;left:3.8%;font:7px var(--mono);color:#b1a9c2;letter-spacing:.05em}.project-foot{display:flex;justify-content:space-between;align-items:center;color:#8c8c96;font-size:10px;margin-top:23px;padding-inline:4px}.project-foot .mono{font-size:8px}.project-foot a{color:#c0c0ca}.project-foot a:hover{color:var(--blue)}
.notes-section{padding:0 0 87px}.notes-section .section-head{border-top:1px solid var(--line);padding-top:35px;margin-bottom:24px}.note-tools{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}.note-filters{display:flex;gap:20px;align-items:center}.filter-button{padding:7px 0;border:0;border-bottom:1px solid transparent;background:none;font-size:11px;color:#92929c}.filter-button[aria-pressed=true]{color:#dedee5;border-color:#c2c2ce88}.note-search{display:flex;align-items:center;gap:9px;border-bottom:1px solid #ffffff21;min-width:190px;max-width:240px;padding:7px 0;color:#94949f}.note-search .pixel-icon{width:12px;height:12px}.note-search input{width:100%;min-width:0;border:0;background:none;color:#d4d4de;font-size:11px;outline-offset:7px}.note-search input::placeholder{color:#898994}.notes-count{font:8px var(--mono);color:#92929e;white-space:nowrap}.note-row{display:grid;grid-template-columns:48px minmax(0,1fr) 148px 18px;align-items:center;gap:22px;padding:27px 0;border-bottom:1px solid var(--line);transition:background .2s}.note-row:hover{background:#ffffff02}.note-number{font:10px var(--mono);color:#888895}.note-main h3{font-size:16px;font-weight:500;line-height:1.7;letter-spacing:-.02em;margin:0 0 6px;transition:color .2s}.note-row:hover h3{color:#b9d2e0}.note-main p{font-size:12px;color:#9595a1;line-height:1.8;margin:0;max-width:630px}.note-meta{text-align:right;color:#9696a1;font-size:10px}.note-meta .mono{display:block;color:#8b8b97;font-size:8px;margin-top:8px}.note-arrow{color:#898994;font-size:17px;transition:transform .2s}.note-row:hover .note-arrow{transform:translate(2px,-2px)}.empty-notes{padding:32px 0;color:#aaaab4;font-size:13px}.about-section{border-top:1px solid var(--line);padding:38px 0 75px;display:grid;grid-template-columns:1fr 1.4fr;gap:80px}.about-section h2{font-size:24px;font-weight:550;line-height:1.6;margin:0;letter-spacing:-.03em}.about-copy p{color:#a7a7b2;font-size:13px;line-height:2;margin:0 0 16px}.about-copy p:last-of-type{margin-bottom:0}.about-links{display:flex;gap:22px;margin-top:26px}.about-links .text-link{font-size:11px}.site-footer{border-top:1px solid var(--line);padding:24px 0 26px}.footer-top{display:flex;justify-content:space-between;gap:24px;align-items:center;color:#92929e;font-size:10px}.footer-brand{display:flex;align-items:center;gap:9px}.footer-brand .pixel-icon{width:13px;height:13px}.footer-top .mono{font-size:8px;color:#8e8e9b}.icp-record{display:block;width:max-content;max-width:100%;margin:20px auto 0;font-size:12px;color:#a0a0aa;letter-spacing:0}.icp-record:hover{text-decoration:underline;text-underline-offset:3px}
.page-breadcrumb{padding-top:43px;font-size:11px;color:#9696a2;display:flex;align-items:center;gap:10px}.page-breadcrumb a:hover{color:var(--blue)}.page-breadcrumb span[aria-hidden]{color:#6d6d79}.article-layout{display:grid;grid-template-columns:minmax(0,720px) 190px;gap:80px;padding:45px 0 82px;align-items:start}.article-header{padding-bottom:27px;border-bottom:1px solid var(--line);margin-bottom:32px}.article-header h1{font-size:34px;line-height:1.5;letter-spacing:-.035em;font-weight:570;margin:17px 0 20px;text-wrap:pretty}.article-meta{display:flex;align-items:center;gap:15px;color:#a0a0ac;font-size:11px}.article-meta time{font:9px var(--mono)}.article-body{font-size:14px;line-height:2;color:#c0c0ca}.article-body .article-lead{font-size:16px;line-height:1.95;color:#d0d0d9;margin:0 0 34px}.article-body h2{font-size:21px;font-weight:550;line-height:1.6;color:#e0e0e8;margin:39px 0 15px;letter-spacing:-.025em;scroll-margin-top:104px}.article-body p{margin:0 0 19px}.article-body ul{padding-left:20px}.article-body li{padding:3px 0}.article-body code{font:11px/1.8 var(--mono);padding:2px 5px;background:#ffffff07;color:#c4d5df;border-radius:3px;overflow-wrap:anywhere}.article-body pre{margin:23px 0 29px;padding:22px 24px;background:#11111390;border:1px solid #ffffff14;border-radius:7px;overflow:auto;max-width:100%;color:#c4d5df}.article-body pre code{padding:0;background:none;white-space:pre;overflow-wrap:normal;font-size:10px;line-height:1.9}.article-body a{color:#b7cfdd;text-decoration:underline;text-decoration-color:#b7cfdd55;text-underline-offset:4px}.article-body img{border:1px solid #ffffff1e;border-radius:8px;margin:25px 0}.article-body figure{margin:24px 0}.article-body figcaption{font-size:10px;text-align:center;color:#9696a1;margin-top:-9px}.article-aside{position:sticky;top:122px;padding-top:8px}.aside-heading{font:8px var(--mono);letter-spacing:.12em;color:#8e8e9b;margin:0 0 17px}.article-toc{display:flex;flex-direction:column;gap:13px;border-left:1px solid #ffffff1d;padding-left:15px}.article-toc a{font-size:11px;line-height:1.9;color:#a0a0ac;transition:color .2s}.article-toc a:hover,.article-toc a.active{color:#d5d5df}.aside-project{border-top:1px solid var(--line);padding-top:21px;margin-top:30px}.aside-project strong{display:block;font-size:12px;font-weight:500;margin-bottom:8px}.aside-project p{font-size:10px;color:#9999a5;line-height:1.9;margin:0 0 15px}.aside-project .text-link{font-size:10px}.article-end{margin-top:43px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;font-size:11px;color:#a4a4b0}.article-end a:hover{color:var(--blue)}.related-notes{padding:0 0 65px}.related-notes .section-head{border-top:1px solid var(--line);padding-top:29px}.related-notes h2{font-size:21px}.project-page-hero{padding:39px 0 32px;position:relative;isolation:isolate}.project-page-hero .hero-canvas{height:320px}.project-page-hero h1{font-size:46px;line-height:1.4;font-weight:550;letter-spacing:-.04em;margin:16px 0 17px}.project-page-hero>p{max-width:650px;color:#aaaab5;font-size:14px;line-height:1.95;margin:0 0 23px}.project-page-actions{display:flex;gap:15px;align-items:center}.project-page-actions .text-link{margin-left:9px}.project-specs{display:flex;gap:35px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin:8px 0 40px}.project-specs div{font-size:11px;color:#c4c4ce}.project-specs span{display:block;font:7px var(--mono);color:#8e8e9c;letter-spacing:.08em;margin-bottom:6px}.project-longform{display:grid;grid-template-columns:minmax(0,720px) 190px;gap:80px;padding:0 0 70px}.project-aside .corner-field{position:absolute;top:-20px;right:-10px;width:200px;height:190px;pointer-events:none;z-index:-1;mask-image:linear-gradient(135deg,#000,transparent 85%)}.project-aside{position:relative;isolation:isolate}.project-aside dl{font-size:11px;margin:0}.project-aside dt{margin:20px 0 5px;color:#91919d}.project-aside dd{margin:0;color:#c3c3cd;line-height:1.9}.project-aside .button{width:100%;margin-top:24px}.project-note-index{border-top:1px solid var(--line);padding-top:26px;margin-top:38px}.project-note-index h2{font-size:21px;font-weight:550;margin:0 0 15px}.project-note-index a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:12px;color:#c3c3ce}.project-note-index a:hover{color:var(--blue)}.site-404{padding:100px 0 150px}.site-404 h1{font-size:38px;font-weight:550}.site-404 p{color:var(--muted);margin-bottom:27px}
.eyebrow-zh{font-family:var(--sans);font-size:10px;letter-spacing:0}
@keyframes light-drift{from{transform:translate3d(-2%,0,0) rotate(-.5deg);opacity:.6}to{transform:translate3d(3%,1%,0) rotate(.6deg);opacity:1}}@keyframes light-breathe{from{transform:scale(.97);opacity:.6}to{transform:scale(1.04);opacity:1}}
@media(min-width:1440px){.hero{padding-top:113px;padding-bottom:83px}.hero h1{font-size:62px}}
@media(max-width:1050px){.article-layout,.project-longform{grid-template-columns:minmax(0,1fr) 170px;gap:44px}.hero-heading-row{gap:45px}.hero-intro{max-width:300px}.desktop-note{padding:17px}.desktop-note strong{font-size:13px}.desktop-note p{font-size:9px}.window-sidebar{width:120px}.project-intro p{max-width:470px}.project-actions{gap:15px}.project-window{width:73%}}
@media(max-width:780px){.container{width:calc(100% - 40px)}.top-nav{height:68px}.nav-inner{gap:15px}.brand{font-size:10px;gap:8px}.brand-symbol{width:23px;height:23px}.nav-links{gap:17px;font-size:11px}.nav-links .nav-play{padding:5px 8px;gap:5px}.nav-play .pixel-icon{width:11px;height:11px}.nav-about{display:none}.hero{padding-top:62px;padding-bottom:45px}.hero-canvas{height:350px}.hero-heading-row{grid-template-columns:1fr;gap:23px;margin-top:21px}.hero h1{font-size:42px;letter-spacing:-.05em;line-height:1.35}.hero-intro{max-width:440px}.hero-intro p{font-size:12px;line-height:1.95}.hero-intro .text-link{margin-top:16px;font-size:11px}.eyebrow{font-size:8px}.hero-bottom{margin-top:28px;font-size:7px}.hero-bottom .location{font-size:9px;letter-spacing:.04em}.section-head{gap:18px;margin-bottom:23px}.section-head h2{font-size:23px}.section-label{font-size:8px;margin-bottom:8px}.section-caption{font-size:10px}.project-section{padding:25px 0 54px}.project-intro{align-items:start;flex-direction:column;gap:19px;margin-bottom:24px}.project-intro h3{font-size:17px}.project-intro h3 span{font-size:8px}.project-intro p{font-size:11px;max-width:550px}.project-actions{gap:22px}.button{min-height:38px;font-size:11px;padding-inline:15px;gap:14px}.project-actions .text-link{font-size:11px}.mac-device{width:calc(100% - 14px);margin-bottom:26px}.mac-screen{border-width:6px;border-bottom-width:9px;border-radius:12px 12px 7px 7px;aspect-ratio:1.55}.mac-menubar{height:19px;font-size:6px;padding:0 9px;gap:11px}.mac-menubar .pixel-icon{width:8px;height:8px}.mac-menubar .menu-extra{display:none}.mac-clock{font-size:5px}.mac-notch{width:140px;height:23px;font-size:5px;border-radius:0 0 7px 7px;gap:5px}.mac-notch i{width:3px;height:3px}.mac-lip{height:10px;width:calc(100% + 16px);margin-inline:-8px}.mac-lip:before{height:3px}.project-window{right:4%;top:14%;width:81%;height:77%;border-radius:6px}.window-bar{height:23px;padding:0 8px;font-size:5px}.traffic-lights{gap:3px}.traffic-lights i{width:4px;height:4px}.window-tools{font-size:5px}.window-layout{height:calc(100% - 23px)}.window-sidebar{width:91px;padding:14px 7px;font-size:5px}.sidebar-title{font-size:5px;padding:0 5px 8px}.file-row{padding:6px 5px;gap:4px}.file-row i{width:3px;height:3px}.sidebar-foot{font-size:6px;margin:15px 5px 0;padding-top:9px}.window-body{padding:8px 10px 6px}.preview-score{font-size:6px;margin-bottom:6px}.preview-score strong{font-size:8px}.preview-score .mono{font-size:5px}.window-status{font-size:4px;padding-top:5px}.desktop-note{left:2.7%;top:32%;width:25%;padding:11px;border-radius:6px}.desktop-note .pixel-icon{width:13px;height:13px;margin-bottom:5px}.desktop-note .note-label{font-size:4px}.desktop-note strong{font-size:9px;margin:6px 0;line-height:1.65}.desktop-note p{font-size:6px;line-height:1.8}.desktop-note .note-bottom{font-size:4px;padding-top:9px;margin-top:12px}.desktop-caption{font-size:5px;bottom:4%;left:3%}.project-foot{font-size:9px;gap:16px;align-items:start}.project-foot .mono{font-size:7px}.notes-section{padding-bottom:53px}.notes-section .section-head{padding-top:29px}.note-tools{gap:17px}.note-filters{gap:16px}.filter-button{font-size:10px}.note-search{min-width:0;width:160px}.note-search input{font-size:10px}.note-row{grid-template-columns:27px minmax(0,1fr) 16px;gap:14px;padding:23px 0}.note-main h3{font-size:15px;line-height:1.7}.note-main p{font-size:11px;line-height:1.9}.note-meta{grid-column:2;grid-row:2;text-align:left;display:flex;gap:13px;align-items:center;font-size:9px}.note-meta .mono{margin:0;font-size:7px}.note-row{row-gap:10px}.note-number{font-size:8px;align-self:start;margin-top:5px}.note-arrow{grid-column:3;grid-row:1;font-size:15px}.about-section{grid-template-columns:1fr;gap:24px;padding:30px 0 48px}.about-section h2{font-size:23px}.about-copy p{font-size:12px;line-height:2}.about-links{margin-top:22px}.footer-top{align-items:start;font-size:9px;gap:18px}.footer-top .mono{font-size:7px;text-align:right;line-height:1.9}.icp-record{margin-top:22px}.page-breadcrumb{padding-top:28px;font-size:10px}.article-layout,.project-longform{display:block;padding-top:30px;padding-bottom:47px}.article-aside{display:none}.article-header h1{font-size:28px;line-height:1.5;margin-top:15px;letter-spacing:-.03em}.article-meta{font-size:10px;gap:12px}.article-meta time{font-size:8px}.article-header{padding-bottom:24px;margin-bottom:27px}.article-body{font-size:13px;line-height:2}.article-body .article-lead{font-size:15px;margin-bottom:27px}.article-body h2{font-size:19px;margin-top:30px}.article-body code{font-size:10px}.article-body pre{padding:17px 15px;margin:20px 0 25px}.article-body pre code{font-size:9px;line-height:1.95}.article-end{font-size:10px;gap:19px}.related-notes{padding-bottom:40px}.related-notes h2{font-size:21px}.project-page-hero{padding-top:29px;padding-bottom:28px}.project-page-hero h1{font-size:36px;margin-top:14px}.project-page-hero>p{font-size:12px}.project-specs{gap:24px;padding:18px 0;margin-bottom:31px;flex-wrap:wrap;row-gap:17px}.project-specs div{font-size:10px}.project-specs span{font-size:6px}.project-longform{padding-top:0}.project-note-index h2{font-size:19px}.project-note-index a{font-size:11px;line-height:1.8}.site-404{padding:65px 0 100px}}
@media(max-width:480px){.container{width:calc(100% - 36px)}.nav-links{gap:14px}.nav-links .nav-notes{display:none}.hero{padding-top:47px}.hero h1{font-size:39px}.hero-bottom .mono{font-size:6px}.section-head h2{font-size:21px}.section-caption{max-width:120px;text-align:right;line-height:1.8}.project-intro h3 span{display:block;margin:3px 0 0;font-size:7px;letter-spacing:.04em}.project-intro h3{margin-bottom:9px}.mac-screen{aspect-ratio:1.12}.mac-menubar{height:20px;font-size:5px;gap:8px}.mac-notch{height:24px;width:104px;font-size:4px}.mac-clock{font-size:4px}.project-window{right:4%;top:14%;width:89%;height:76%}.window-sidebar{display:none}.window-bar{height:23px;font-size:4px}.window-layout{height:calc(100% - 23px)}.window-body{padding:8px 9px 6px}.preview-score{font-size:6px}.preview-score strong{font-size:8px}.preview-score .mono{font-size:4px}.window-status{font-size:4px}.desktop-note{left:3%;top:auto;bottom:5%;width:auto;max-width:60%;display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:5px}.desktop-note .pixel-icon{width:13px;height:13px;margin:0}.desktop-note .note-label,.desktop-note p,.desktop-note .note-bottom{display:none}.desktop-note strong{font-size:8px;margin:0}.desktop-note strong br{display:none}.desktop-caption{display:none}.project-foot{flex-direction:column;gap:7px;margin-top:19px;font-size:9px}.note-tools{flex-wrap:wrap;gap:8px;margin-bottom:8px}.note-search{width:135px}.note-filters{gap:13px}.filter-button{font-size:9px}.note-row{gap:10px;grid-template-columns:22px minmax(0,1fr) 14px;row-gap:9px}.note-main h3{font-size:14px;line-height:1.75}.note-main p{font-size:10px}.note-meta{font-size:8px}.note-meta .mono{font-size:6px}.footer-top{flex-direction:column;gap:10px}.footer-top .mono{text-align:left;font-size:7px}.project-page-actions{gap:10px;flex-wrap:wrap}.project-page-actions .text-link{margin-left:3px;font-size:10px}.project-specs{gap:21px}.article-header h1{font-size:26px}.article-end{align-items:start;flex-direction:column}.article-body pre code{font-size:8px}.project-note-index a{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.article-body pre:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
@media(max-width:780px){.notes-section .section-head{flex-direction:column;align-items:start;gap:8px}.notes-section .section-caption{text-align:left;max-width:none}.article-body pre code{font-size:10px}}