:root{color-scheme:dark;--bg:#0d1017;--fg:#bfbdb6;--surface:#131721;--rule:color-mix(in srgb,var(--fg) 28%,var(--bg));--muted:color-mix(in srgb,var(--fg) 55%,var(--bg));--accent:#e6b450;--accentSoft:#2b271f;--font-body:Inter,sans-serif;--font-heading:"Permanent Marker",cursive;--font-mono:"IBM Plex Mono",monospace}
html[data-mode="dark"]{color-scheme:dark}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:3rem}
body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit}button,select,input{font:inherit}button,select{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
::selection{background:var(--accent);color:var(--bg)}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:absolute;top:-200px;left:24px;background:var(--fg);color:var(--bg);padding:12px;z-index:9}.skip:focus{top:10px}
.wrap{width:min(100% - 80px,1220px);margin:0 auto}.header{min-height:84px;display:flex;gap:32px;align-items:center;border-bottom:1px solid var(--rule)}
.home{display:inline-flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap;font-weight:780;font-size:15px;letter-spacing:-.025em}.home .dim{font-weight:460;color:var(--muted)}.mark{display:block;width:38px;height:38px;flex:0 0 38px}.mark .raccoon-nav{display:block;width:100%;height:100%}
.nav{display:flex;gap:27px;align-items:center;margin-left:auto}.nav a{text-decoration:none;font-size:13px;color:var(--muted)}.nav a:hover{color:var(--accent)}
.theme-tools{display:flex;align-items:center;gap:8px;margin-left:14px}.theme-tools select,.theme-tools button{background:transparent;border:1px solid var(--rule);color:var(--fg);border-radius:5px;height:36px;padding:0 9px;font-size:12px}.theme-tools select{max-width:165px;min-width:133px}.theme-tools button{display:inline-flex;gap:6px;align-items:center;padding:0 11px;white-space:nowrap}.mode-icon{font-size:19px;line-height:1}.theme-tools select:hover,.theme-tools button:hover{border-color:var(--muted)}
.intro{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.65fr);align-items:center;min-height:470px;gap:54px;padding:72px 0 74px;border-bottom:1px solid var(--rule)}.intro-copy{min-width:0}.intro h1{font-weight:750;font-size:clamp(44px,5.5vw,76px);line-height:1.11;letter-spacing:-.073em;margin:0 0 30px}.intro h1 span{white-space:nowrap}.intro h1 em{font-style:normal;color:var(--accent)}.intro h1 del{text-decoration:line-through;text-decoration-thickness:.075em;text-decoration-color:var(--accent);color:var(--muted);opacity:.85}
.deck{font-size:clamp(17px,1.48vw,19px);line-height:1.63;max-width:665px;margin:0 0 16px;letter-spacing:-.017em}.small-note{font-size:15px;color:var(--muted);line-height:1.65;max-width:580px;margin:0}.explore{display:inline-flex;gap:28px;align-items:center;border-bottom:1px solid var(--accent);padding:9px 1px 7px;margin-top:27px;font-size:14px;font-weight:720;text-decoration:none;color:var(--accent)}.explore:hover{gap:37px}.explore span{font-size:20px;font-weight:400}
.art{max-width:370px;width:100%;margin:0 auto;align-self:center}.art svg{width:100%;display:block;overflow:visible}.art p{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-align:center;color:var(--muted);font-size:11px;margin:4px 0 0;letter-spacing:-.035em}
.shelf{padding:70px 0 76px}.shelf-top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:36px}.shelf h2,.about h2{font-size:clamp(32px,3.7vw,49px);line-height:1.1;letter-spacing:-.065em;margin:0 0 10px;font-weight:735}.shelf h2 .punct{color:var(--accent)}.shelf-top p{font-size:15px;color:var(--muted);margin:0;line-height:1.5}.count{font-size:13px;color:var(--muted);white-space:nowrap}.count strong{color:var(--fg);font-size:23px;font-weight:740;letter-spacing:-.04em;margin-right:4px}
.browse{display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:13px 0}.search-wrap{display:flex;align-items:center;gap:6px;flex:0 0 235px;color:var(--muted);min-width:0}.mag{font-size:24px;line-height:1}.search-wrap input{background:transparent;border:0;width:100%;min-width:0;outline:0;color:var(--fg);padding:6px 2px;font-size:14px}.search-wrap input::placeholder{color:var(--muted);opacity:1}.search-wrap:focus-within{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}.search-wrap input:focus-visible{outline:none}.search-wrap kbd{font-size:11px;color:var(--muted);border:1px solid var(--rule);border-radius:3px;padding:0 5px}
.filters{display:flex;gap:3px;overflow:auto;max-width:100%;scrollbar-width:thin}.filter{border:0;color:var(--muted);background:transparent;border-radius:4px;padding:8px 10px;white-space:nowrap;font-size:13px}.filter:hover{background:var(--surface);color:var(--fg)}.filter.active{color:var(--accent);font-weight:750;background:var(--accentSoft)}.results{color:var(--muted);font-size:12px;margin:17px 0 2px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:35px;row-gap:0}.app-card{display:flex;gap:14px;align-items:flex-start;min-width:0;border-bottom:1px solid var(--rule);padding:23px 2px 25px;text-decoration:none;min-height:133px;position:relative}.app-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .16s}.app-card:hover::before,.app-card:focus-visible::before{transform:scaleX(1)}.app-card:hover h3{color:var(--accent)}.app-card .body{min-width:0;flex:1}.app-card h3{font-size:20px;letter-spacing:-.036em;font-weight:730;margin:0 0 5px;line-height:1.3}.app-card p{color:var(--muted);font-size:13px;line-height:1.55;margin:0;max-width:330px}.app-card[hidden]{display:none}.app-card .app-icon{color:var(--accent);opacity:.85;font-size:24px;line-height:1.25;width:30px;flex:0 0 30px;font-weight:400;font-family:Georgia,serif;text-align:center}.empty{font-size:16px;color:var(--muted);padding:35px 0}.empty button{background:none;border:0;text-decoration:underline;color:var(--accent);padding:0 0 0 8px}.noscript{color:var(--muted)}
.about{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:60px 0 65px}.about h2{font-size:35px;margin-bottom:21px}.about-text{max-width:640px}.about-text p{font-size:15px;line-height:1.72;margin:0 0 11px;color:var(--muted)}.about-quote{font-size:clamp(29px,3vw,46px);font-weight:700;letter-spacing:-.055em;line-height:1.2;align-self:center;justify-self:center;transform:rotate(-3deg)}.about-quote em{font-style:normal;color:var(--accent)}
footer{min-height:94px;display:flex;gap:25px;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}footer a{color:var(--fg);text-decoration:none}footer a:hover{color:var(--accent)}
@media(max-width:1050px){.wrap{width:min(100% - 48px,1220px)}.header{gap:14px}.nav{gap:16px}.nav a{font-size:12px}.theme-tools{margin-left:2px}.intro{gap:20px}.intro h1{font-size:clamp(42px,5.2vw,65px)}.grid{column-gap:22px}.browse{flex-direction:column;align-items:stretch}.search-wrap{flex:auto}.filters{order:2}}
@media(max-width:750px){.wrap{width:min(100% - 36px,1220px)}.header{flex-wrap:wrap;gap:12px;padding:13px 0;min-height:0}.home{flex:1}.nav{order:3;flex-basis:100%;gap:20px;margin-left:0}.theme-tools{margin-left:auto}.intro{grid-template-columns:1fr;min-height:0;gap:14px;padding:48px 0 48px}.intro h1{font-size:clamp(38px,7.2vw,59px);margin-bottom:25px}.intro h1 span{white-space:normal}.deck{font-size:18px}.art{max-width:235px;margin:10px 0 0 auto}.art p{font-size:10px}.shelf{padding:47px 0}.shelf-top{align-items:flex-start;flex-direction:column;gap:9px;margin-bottom:27px}.count{font-size:12px}.count strong{font-size:16px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}.app-card{padding:19px 0 22px;min-height:126px}.app-card h3{font-size:18px}.app-card .app-icon{display:none}.about{gap:25px;padding:42px 0;grid-template-columns:1fr}.about-quote{font-size:31px;justify-self:start;margin-left:17px}footer{flex-wrap:wrap;justify-content:flex-start;gap:12px 22px;padding:25px 0}}
@media(max-width:460px){.home{font-size:13px;gap:7px}.mark{width:32px;height:32px;flex-basis:32px}.theme-tools select{min-width:0;max-width:117px}.theme-tools button{padding:0 8px}.nav{gap:16px}.intro h1{font-size:clamp(35px,8.3vw,46px)}.art{max-width:210px;margin-top:2px}.grid{grid-template-columns:1fr}.app-card{min-height:0;padding:20px 0}.app-card .app-icon{display:block}.filters{margin:0 -18px;padding:0 18px}.shelf-top p{font-size:14px}}

/* Wider canvas for the app directory; keep the handmade block motif quieter. */
.wrap{width:min(100% - 96px,1600px)}
.motif-pattern{opacity:0;transition:opacity .18s ease}
.grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:22px}
.results-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.keyboard-hint{border:0;background:transparent;color:var(--muted);font:10px/1.5 var(--font-mono);margin:0;padding:0;white-space:nowrap}
.keyboard-hint kbd{font:inherit;color:var(--fg);border:1px solid var(--rule);border-radius:3px;padding:1px 4px}
.app-visual{flex-basis:88px;width:88px;height:82px}
.keyboard-hint{cursor:pointer}
.keyboard-hint:hover{color:var(--accent)}
.keyboard-hint:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#shortcuts-dialog{width:min(520px,calc(100% - 32px));max-height:min(80vh,620px);padding:24px;background:var(--surface);color:var(--fg);border:1px solid var(--rule);border-radius:10px;box-shadow:0 24px 80px #0008}
#shortcuts-dialog::backdrop{background:#080a0dcc;backdrop-filter:blur(3px)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.dialog-head h2{font:400 25px/1.2 var(--font-heading);margin:0}
.dialog-close{width:34px;height:34px;border:1px solid var(--rule);border-radius:6px;background:transparent;color:var(--fg);font-size:22px;line-height:1}
.shortcut-list{display:grid;gap:0;margin:0}
.shortcut-list>div{display:grid;grid-template-columns:minmax(150px,.8fr) 1fr;gap:18px;align-items:center;padding:12px 0;border-top:1px solid var(--rule)}
.shortcut-list dt{font:12px/1.6 var(--font-mono);color:var(--fg)}
.shortcut-list dd{margin:0;color:var(--muted);font-size:13px}
.shortcut-list kbd{font:inherit;border:1px solid var(--rule);border-radius:3px;padding:1px 4px}
.app-card.keyboard-current{animation:keyboard-trail .46s ease-out}
@keyframes keyboard-trail{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent)}45%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.filter{transition:color .18s ease,background-color .18s ease,transform .18s ease}
.filter.active{transform:translateY(-1px)}
@media(max-width:1050px){.wrap{width:min(100% - 48px,1220px)}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}footer{flex-wrap:wrap}}
@media(max-width:750px){.wrap{width:min(100% - 36px,1220px)}.results-row{align-items:flex-start;flex-direction:column;gap:0}}
@media(max-width:460px){.keyboard-hint{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Ayu Dark / Poster Grit assets from Theme Lab; bundled for offline use. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/inter-e3237528af.woff2") format("woff2")}
@font-face{font-family:"Permanent Marker";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/permanentmarker-58ea338e63.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/ibmplexmono-7e3d7e3c7d.woff2") format("woff2")}
html[data-mode="light"]{color-scheme:light}
body{position:relative;isolation:isolate;overflow-x:hidden;font-family:var(--font-body)}
.surface-texture,.motif-pattern{position:absolute;inset:0;pointer-events:none}
.surface-texture{z-index:0;background-image:var(--texture-image);background-position:top left;background-repeat:repeat;background-size:var(--texture-size,384px 384px);opacity:var(--texture-opacity,0)}
.motif-pattern{z-index:1;background-color:var(--motif-color);mask-image:var(--motif-image);mask-position:0 0;mask-repeat:repeat;mask-size:var(--motif-size,1792px 770px)}
html[data-theme-ready="true"] .surface-texture{transition:opacity .18s ease}
html[data-theme-ready="true"] .motif-pattern{opacity:.8}
.wrap{position:relative;z-index:2}
.home,.nav,.count,.results,.small-note,.art p,footer{font-family:var(--font-mono)}
.intro h1,.shelf h2,.about h2,.app-card h3{font-family:var(--font-heading);font-weight:400;letter-spacing:0;line-height:1.16;-webkit-mask-image:var(--heading-mask-image);mask-image:var(--heading-mask-image);-webkit-mask-size:var(--heading-mask-size,2.8em 2.8em);mask-size:var(--heading-mask-size,2.8em 2.8em);-webkit-mask-repeat:repeat;mask-repeat:repeat}
.intro h1{font-size:clamp(42px,5.1vw,72px);line-height:1.18;margin-bottom:26px}
.shelf h2,.about h2{font-size:clamp(30px,3.4vw,45px)}
.app-card h3{font-size:18px;line-height:1.24;margin-bottom:7px}
.grid{column-gap:14px;row-gap:12px}
.app-card{min-height:132px;padding:18px 15px 20px;border:1px solid var(--rule);border-radius:9px;background:color-mix(in srgb,var(--surface) 88%,transparent);transition:background .16s,border-color .16s,transform .16s}
.app-card::before{top:-1px;left:12px;right:12px;border-radius:9px}
.app-card:hover{border-color:var(--accent);background:color-mix(in srgb,var(--surface) 96%,transparent);transform:translateY(-2px)}
.app-card p{font-size:12px}
.app-visual{display:block;position:relative;flex:0 0 72px;width:72px;height:64px;overflow:hidden;border-radius:7px;background:var(--accentSoft)}
.app-image{display:block;width:100%;height:100%;object-fit:contain;background:var(--surface)}
.app-image[hidden]{display:none}
.app-visual .app-icon{display:grid;width:100%;height:100%;place-items:center;border-radius:7px;background:var(--accentSoft);font-family:var(--font-heading);font-size:27px}
.app-visual .app-icon[hidden]{display:none}
.app-card h3,.app-card p{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.app-card h3{-webkit-line-clamp:2}
.app-card p{-webkit-line-clamp:3}
.theme-tools select,.theme-tools button{border-radius:8px}
.theme-tools select{background-color:var(--bg);color:var(--fg);color-scheme:dark}
.theme-tools select option{background-color:var(--surface);color:var(--fg)}
.theme-tools select option:checked{background-color:var(--accent);color:var(--bg)}
html[data-mode="light"] .theme-tools select{color-scheme:light}
.art{max-width:450px}
:root{--raccoon-bg:transparent;--raccoon-fur:color-mix(in srgb,var(--fg) 72%,var(--muted));--raccoon-fur-shadow:var(--muted);--raccoon-fur-light:color-mix(in srgb,var(--fg) 86%,white);--raccoon-fur-white:color-mix(in srgb,var(--fg) 90%,white);--raccoon-ear:color-mix(in srgb,var(--surface) 75%,var(--bg));--raccoon-mask:color-mix(in srgb,var(--bg) 90%,black);--raccoon-mask-shine:color-mix(in srgb,var(--accent) 18%,var(--bg));--raccoon-ink:var(--bg);--raccoon-accent:var(--accent);--raccoon-hardware:var(--fg);--raccoon-hardware-muted:var(--muted);--raccoon-panel:var(--surface);--raccoon-cloud:var(--muted);--raccoon-glow:.5}
html[data-mode="light"]{--raccoon-fur:color-mix(in srgb,var(--muted) 66%,var(--fg));--raccoon-fur-shadow:color-mix(in srgb,var(--muted) 70%,var(--fg));--raccoon-fur-light:color-mix(in srgb,var(--fg) 22%,white);--raccoon-fur-white:white;--raccoon-ear:#33424b;--raccoon-mask:#293640;--raccoon-mask-shine:color-mix(in srgb,var(--accent) 18%,#293640);--raccoon-ink:#1d2831;--raccoon-hardware:var(--fg);--raccoon-hardware-muted:color-mix(in srgb,var(--muted) 75%,var(--fg));--raccoon-panel:color-mix(in srgb,var(--surface) 75%,var(--fg) 25%);--raccoon-cloud:var(--muted);--raccoon-glow:.18}
@media(max-width:750px){.art{max-width:380px}}
@media(max-width:460px){.art{max-width:340px}}
@media(max-width:750px){.app-card{padding:16px 12px 18px}.app-card h3{font-size:17px}}

/* Keep the app destination and source metadata as separate, accessible links. */
.app-card{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden}
.app-card::before{z-index:1;pointer-events:none}
.app-card:hover,.app-card:focus-within{border-color:var(--accent);background:color-mix(in srgb,var(--surface) 96%,transparent);transform:translateY(-2px)}
.app-primary{display:flex;align-items:flex-start;gap:14px;min-width:0;flex:1;padding:18px 15px 8px;text-decoration:none}
.app-primary:focus-visible{outline-offset:-4px}
.app-card .body{min-width:0;flex:1}
.app-meta{display:flex;align-items:center;gap:12px;min-height:24px;margin:0 15px 10px 101px;color:var(--muted);font:10px/1.4 var(--font-mono)}
.app-repo{color:var(--accent);text-decoration:none}
.app-repo:hover{text-decoration:underline}
.app-established{white-space:nowrap}
.app-card:hover h3,.app-card:focus-within h3{color:var(--accent)}
@media(max-width:750px){.app-primary{padding:16px 12px 8px}.app-meta{margin-left:98px;margin-right:12px}}
@media(max-width:460px){.app-primary{padding:17px 12px 8px}.app-meta{margin-left:98px}}

/* Give app descriptions enough room to read on a phone. */
.grid{row-gap:12px}
.app-card{min-height:0}
.app-primary{flex-direction:column;gap:0;padding:0}
.app-visual{flex:0 0 auto;width:100%;height:auto;aspect-ratio:1200/630;border-radius:0}
.app-image{object-fit:cover}
.app-visual .app-icon{border-radius:0}
.app-card .body{padding:12px 12px 10px}
.app-card h3{font-size:18px}
.app-card p{display:block;overflow:visible;font-size:14px;line-height:1.5}
.app-meta{margin:0 12px 12px}