:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#e7e7e7;background:#000;line-height:1.5;color-scheme:dark}*{box-sizing:border-box}body{margin:0}main{max-width:1280px;margin:auto;padding:24px 20px}.public{max-width:640px}header{height:64px;display:flex;align-items:center;border-bottom:1px solid #282828;margin-bottom:24px}.brand{font-size:22px;font-weight:600}.brand span{color:#51ff0d}h1{font-size:26px;font-weight:500}h2{font-size:20px;font-weight:500}.card{border:0;border-top:1px solid #282828;border-radius:0;background:#000;box-shadow:none;padding:24px 0;margin:0}.public .card:first-of-type{border:0;padding-top:0}p,.notes{color:#aaa;font-size:14px}.download{display:flex;justify-content:space-between;align-items:center;min-height:48px;border:1px solid #51ff0d;border-radius:4px;padding:12px 14px;color:#51ff0d;text-decoration:none;font-size:14px}.download:hover{background:#51ff0d;color:#000}.release-time{font-size:12px;line-height:1.8}.notes{padding-left:20px}.notes li{margin:8px 0}.checksum{font-size:11px;color:#888;margin-top:24px}.checksum code{display:block;overflow-wrap:anywhere;margin-top:8px}.browser iframe{display:block;width:100%;height:760px;height:min(820px,90vh);border:1px solid #282828;border-radius:4px;background:#000}button,input,select{font:inherit;background:#000;color:#e7e7e7;border:1px solid #282828;border-radius:4px}button,a,summary{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #51ff0d;outline-offset:3px}.quiet-button{color:#51ff0d;background:#000;border-color:#282828;border-radius:4px}#download-search,#user-search,#activity-search{background:#000;color:#e7e7e7;border-color:#666;border-radius:4px}.table-scroll,td,th{border-color:#282828}th{background:#111}td small,#users-status,summary{color:#aaa}@media(max-width:600px){main{padding:16px}.users-card{padding:20px 0}.browser iframe{height:780px}}

.download-meta{font-size:12px;white-space:nowrap;margin-left:12px}.download-meta>span{margin-left:10px}

/* The browser menu and course use the same app/storage as /app/. */
.browser iframe{max-width:412px;margin:0 auto}
body.browser-playing{overflow:hidden}
body.browser-playing::before{content:"";position:fixed;inset:0;z-index:999;background:#000}
.browser-playing .public>.card:first-child,.browser-playing #browser-heading{visibility:hidden}
.browser iframe.is-playing{position:fixed;left:0;top:0;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;z-index:1000}
@media(min-width:960px) and (min-height:600px){
 .public{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;max-width:1440px;align-items:start}
 .public .browser{display:flex;flex-direction:column;height:calc(100vh - 48px);min-width:0;min-height:0;padding:0;border:0}
 .browser #browser-heading{margin:0 0 16px;text-align:center}
 .browser-screen{position:relative;flex:1;min-height:0}
 .browser iframe,.browser iframe.is-playing{position:absolute;left:50%;top:50%;width:var(--browser-width);height:var(--browser-height);max-width:none;margin:0;transform:translate(-50%,-50%) scale(var(--browser-scale));border:0;border-radius:12px;outline:1px solid #282828}
 body.browser-playing{overflow:auto}
 body.browser-playing::before{display:none}
 .browser-playing .public>.card:first-child,.browser-playing #browser-heading{visibility:visible}
}