.header-search{align-self:center}
.page-width.footer{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}.footer-brand-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 16px}.footer-brand-line>span,.footer-brand-line>.registration-link{white-space:nowrap}.registration-link:hover{text-decoration:underline}
.intro-copy{flex:1;min-width:0}
.intro-copy h1{margin-top:0}
.intro-art{position:relative;inset:auto;flex:0 0 34%;min-width:235px;min-height:220px;height:auto;padding:25px 12px;opacity:1;z-index:3}
.intro-art .art-window{flex-shrink:0;height:auto;min-height:164px;margin:0 12px 0 0}
.intro-art .window-leaf{flex-shrink:0}
.content-layout{align-items:stretch}
.category-sidebar{display:flex;min-width:0}
.category-sidebar>.side-panel{flex:1;margin-bottom:0}
.directory-main{display:flex;min-width:0}
.directory-main>.sites-panel{display:flex;flex:1;min-width:0;flex-direction:column}
.sites-panel>.site-list{flex:1}
.app-directory-grid{display:flex;flex-direction:column}
.app-directory-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start;justify-items:center;min-height:112px;padding:10px 16px}
.app-directory-row+.app-directory-row{border-top:1px solid #e8ece8}
.app-grid-tile{display:flex;align-items:center;flex-direction:column;justify-content:flex-start;gap:8px;width:88px;min-height:91px;outline-offset:5px;transition:transform .16s,filter .16s}
.app-grid-tile:hover{transform:translateY(-3px);filter:brightness(1.04)}
.app-grid-tile:active{transform:scale(.94)}
.app-grid-icon{width:62px;height:62px;border-radius:17px;overflow:hidden;display:grid;place-items:center;background:#edf4e9;color:#6e9b72;box-shadow:0 8px 20px #31583b22;font-size:24px;font-weight:650}
.app-grid-icon img{width:100%;height:100%;object-fit:cover;display:block}
.app-grid-name{display:block;width:88px;overflow:hidden;color:#60705f;font-size:11px;font-weight:500;line-height:1.55;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.app-grid-tile:hover .app-grid-name{color:var(--green)}
.screenshot-upload-label{display:block;margin-top:15px;font-size:12px;color:#6e8062}
.screenshot-upload-label>input{display:block;width:100%;margin-top:8px;padding:10px;border:1px solid #e0e8d9;border-radius:5px;background:#fcfdf9;color:#71826b;font-size:11px}
.screenshot-upload-label small{display:block;margin-top:6px;color:#9baa91;font-size:10px;line-height:1.8}
.screenshot-upload-preview{display:flex;gap:9px;min-height:48px;margin-top:10px;padding:9px;overflow-x:auto;background:#f6f9f2;border:1px dashed #dce7d4;border-radius:8px}
.screenshot-upload-preview>span{align-self:center;padding:0 4px;color:#9ead94;font-size:11px}
.screenshot-upload-preview img{width:48px;height:76px;object-fit:cover;border-radius:7px;border:1px solid #dfe8d7;background:#fff;flex:0 0 auto}
.review-screenshots{display:flex;gap:12px;margin:20px 0;padding:12px;overflow-x:auto;background:#f7faf4;border:1px solid #e7eee1;border-radius:10px}.review-screenshots img{height:220px;width:auto;max-width:50%;object-fit:contain;border-radius:8px;background:#fff;flex:0 0 auto}

@media(max-width:800px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body:not([data-page]) .page-width{width:calc(100% - 24px)}
  .main-header{flex-direction:column;align-items:stretch;gap:14px;padding:18px 0 14px}
  .main-header .brand strong{font-size:27px}
  .main-header .header-search{width:100%;max-width:none;align-self:stretch}
  .main-header .header-search form{height:44px}
  .main-header .header-search input{font-size:16px;min-width:0}
  .main-header .header-search form>button{min-width:88px;font-size:12px}
  body:not([data-page]) .main-nav{display:none}
  .announcement{min-height:0;height:auto;padding:12px 0;font-size:11px;line-height:1.8}
  .announcement>div{align-items:flex-start;gap:7px;min-width:0}
  .announcement>div>span:last-child{max-width:none;overflow-wrap:anywhere}
  .intro-panel{display:block;min-height:0;margin-top:14px}
  .intro-copy{padding:18px 16px;max-width:none}
  .intro-copy h1{margin:0 0 12px;padding-right:90px;font-size:23px;line-height:1.5}
  .intro-copy>p{max-width:none;font-size:12px;line-height:1.95;margin:0}
  .intro-art{position:absolute;inset:16px 9px auto auto;flex:none;width:100px;min-width:0;min-height:0;height:76px;padding:0;opacity:1;pointer-events:none}
  .intro-art .art-window{width:96px;min-height:0;height:auto;margin:0;box-shadow:3px 4px 0 #c2d0ac33}
  .intro-art .window-top,.intro-art .window-bottom,.intro-art .art-grid,.intro-art .art-star{display:none}
  .intro-art .window-body{padding:12px 7px;gap:5px}
  .intro-art .window-body>div{min-width:0;flex:1}
  .intro-art .window-leaf{width:23px;height:23px}
  .intro-art .window-leaf svg{width:15px;height:15px}
  .intro-art .window-body b{font-size:9px;line-height:1.7;letter-spacing:0;white-space:nowrap}
  .intro-art .window-body>div>span{display:none}
  .content-layout{grid-template-columns:minmax(0,1fr);align-items:start;gap:12px;margin-top:0}
  .content-layout .category-sidebar{display:block;min-width:0}
  .category-sidebar>.side-panel:first-child{margin:0;width:100%;border-radius:7px}
  .category-sidebar>.side-panel:first-child>.panel-title{display:none}
  .category-sidebar .category-menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:7px;gap:4px}
  .category-menu .category-item{justify-content:center;min-width:0;min-height:36px;padding:8px 2px;font-size:12px;gap:0;white-space:nowrap}
  .category-item>span:first-child{display:none}
  .category-item>span:last-child{display:none}
  .directory-main{width:100%;min-width:0}
  .directory-main>.sites-panel{min-height:0;width:100%}
  .directory-title{padding:13px 12px;gap:8px}
  .directory-title>div:first-child{min-width:0;gap:4px;flex-wrap:wrap}
  .directory-title h2{font-size:14px;white-space:normal}
  .count-label{font-size:11px;margin:0}
  .directory-options{gap:0}
  .directory-options select{width:64px;font-size:12px;padding-left:0}
  .app-directory-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;min-height:0;padding:16px 8px}
  .app-grid-tile{width:100%;min-width:0;min-height:0;gap:7px}
  .app-grid-icon{width:44px;height:44px;border-radius:12px;box-shadow:0 4px 10px #31583b18}
  .app-grid-name{width:100%;font-size:11px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
  .directory-footnote{padding:9px 8px;font-size:9px;line-height:1.6}
  .filter-summary{padding:9px 8px;font-size:11px;overflow-wrap:anywhere}
  .search-empty{padding:24px 10px}
  .search-empty h3{font-size:13px;line-height:1.8}
  .search-empty p{font-size:11px;line-height:1.8}
  .join-section{margin-top:14px;padding:0;gap:0;border:0;background:none;flex-direction:column;align-items:stretch}
  .join-section .join-copy,.join-section:after{display:none}
  .join-action{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .join-action>button:first-child{min-height:44px}
  .join-standards{margin:0}
  .join-dialog input:not([type=checkbox]),.join-dialog select,.join-dialog textarea{font-size:16px}
  .page-width.footer{gap:7px;padding:18px 0 20px}
  .footer-brand-line{gap:4px 8px;font-size:9px;line-height:1.8}
  .footer p{max-width:none;font-size:10px;line-height:1.8;margin:0}
}
@media(max-width:360px){
  .app-directory-row{padding-inline:6px;gap:5px}
  .app-grid-icon{width:40px;height:40px;border-radius:11px}
  .category-menu .category-item{font-size:11px}
  .directory-title h2{font-size:13px}
}