body {
    margin:0;
    font-size:14px;
    line-height:1.6
}

a {
    color:inherit
}

button,input,select {
    font:inherit
}

button {
    cursor:pointer
}

a:focus-visible,button:focus-visible {
    outline:3px solid var(--grass-color-focus-ring);
    outline-offset:4px
}

svg {
    width:22px;
    height:22px;
    flex-shrink:0
}

.site-header {
    background:var(--grass-color-surface);
    border-bottom:1px solid var(--grass-color-border)
}

.header-inner {
    max-width:1240px;
    margin:auto;
    padding:20px 36px;
    display:flex;
    align-items:center;
    gap:64px
}

.brand {
    display:flex;
    align-items:center;
    gap:11px;
    text-decoration:none;
    font-size:22px;
    font-weight:800;
    letter-spacing:-.8px
}

.brand-light {
    font-weight:400
}

.header-inner nav {
    display:flex;
    gap:30px;
    align-self:stretch;
    align-items:center
}

.header-inner nav a {
    text-decoration:none;
    color:var(--grass-color-text-muted);
    font-weight:600;
    position:relative;
    padding:7px 0
}

.header-inner nav a[aria-current] {
    color:var(--grass-color-brand)
}

.header-inner nav a[aria-current]:after {
    content:"";
    position:absolute;
    bottom:-21px;
    height:3px;
    border-radius:2px;
    background:var(--grass-color-brand);
    left:0;
    right:0
}

.header-actions {
    margin-left:auto;
    display:flex;
    gap:22px;
    align-items:center
}

.public-badge {
    font-size:12px;
    color:var(--grass-color-text-muted);
    white-space:nowrap
}

.public-badge i {
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--grass-color-brand);
    margin-right:5px
}

.site-main {
    max-width:1170px;
    margin:auto;
    padding:58px 32px 70px;
    min-height:calc(100vh - 171px)
}

.eyebrow {
    font-size:11px;
    letter-spacing:2.3px;
    font-weight:700;
    color:var(--grass-color-brand)
}

.page-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:34px;
    gap:24px
}

h1 {
    font-size:40px;
    letter-spacing:-1.7px;
    line-height:1.2;
    margin:10px 0 15px;
    font-weight:700
}

.heading-dot {
    color:var(--grass-color-brand);
    margin-left:5px
}

.page-heading p {
    color:var(--grass-color-text-muted);
    margin:0;
    font-size:14px
}

.access-note {
    display:flex;
    align-items:center;
    gap:16px;
    padding-top:15px
}

.access-note strong {
    display:block;
    font-weight:600;
    font-size:13px
}

.access-note div>span {
    display:block;
    color:var(--grass-color-text-muted);
    font-size:11px;
    margin-top:4px
}

.access-symbol {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    background:var(--grass-color-brand-soft);
    border-radius:14px;
    color:var(--grass-color-brand);
    font-size:27px
}

.file-panel {
    padding:0;
    overflow:hidden;
    box-shadow:0 4px 24px rgb(18 47 29 / 3%)
}

.panel-title {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px 28px 20px
}

.panel-title>div {
    display:flex;
    align-items:center;
    gap:14px
}

.panel-title h2 {
    font-size:17px;
    margin:0;
    letter-spacing:-.4px
}

.panel-title>div>span {
    font-size:9px;
    letter-spacing:1.5px;
    color:var(--grass-color-text-subtle)
}

.panel-title .gu-status {
    font-size:11px;
    color:var(--grass-color-brand);
    background:var(--grass-color-brand-soft);
    padding:3px 10px;
    border-radius:5px
}

.directory-bar {
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:15px 28px;
    background:var(--grass-color-surface-muted);
    border-block:1px solid var(--grass-color-border)
}

.breadcrumbs {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    min-width:0;
    font-size:12px
}

.breadcrumbs a {
    word-break:break-all;
    text-decoration:none
}

.breadcrumbs a:last-child {
    color:var(--grass-color-brand);
    font-weight:600
}

.breadcrumbs>span {
    color:var(--grass-color-text-subtle)
}

.result-count {
    font-size:11px;
    color:var(--grass-color-text-subtle);
    white-space:nowrap
}

.file-toolbar {
    display:flex;
    align-items:center;
    gap:12px;
    padding:22px 28px
}

.search-field {
    position:relative;
    flex:1;
    max-width:520px;
    margin-right:auto
}

.search-field svg {
    position:absolute;
    left:13px;
    top:12px;
    width:18px;
    height:18px;
    color:var(--grass-color-text-subtle)
}

.search-field input {
    padding-left:41px;
    height:43px;
    font-size:12px
}

.sort-select {
    width:155px;
    min-height:43px;
    font-size:12px
}

.file-toolbar .gu-action {
    min-height:43px;
    font-size:12px;
    padding-inline:20px
}

.clear-search {
    font-size:12px;
    white-space:nowrap;
    color:var(--grass-color-text-muted)
}

.file-table-head,.file-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) 110px 172px 118px;
    align-items:center;
    column-gap:20px;
    padding:0 28px
}

.file-table-head {
    min-height:37px;
    background:var(--grass-color-surface-muted);
    color:var(--grass-color-text-subtle);
    font-size:11px;
    border-block:1px solid var(--grass-color-border)
}

.file-table-head small {
    font-size:9px;
    margin-left:4px
}

.action-heading {
    text-align:right
}

.file-row {
    min-height:85px;
    border-bottom:1px solid var(--grass-color-border)
}

.file-row:hover {
    background:var(--grass-color-surface-muted)
}

.file-identity {
    min-width:0;
    display:flex;
    gap:14px;
    align-items:center
}

.file-identity>div {
    min-width:0
}

.file-icon {
    width:40px;
    height:44px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    background:var(--grass-color-surface-muted);
    color:var(--grass-color-text-muted);
    border:1px solid var(--grass-color-border);
    border-radius:9px
}

.folder-icon {
    color:var(--grass-color-brand);
    background:var(--grass-color-brand-soft);
    border-color:transparent
}

.file-name {
    display:block;
    text-decoration:none;
    font-weight:600;
    font-size:13px;
    overflow-wrap:anywhere
}

.file-name:hover {
    color:var(--grass-color-brand)
}

.file-kind {
    display:block;
    font-size:10px;
    color:var(--grass-color-text-subtle);
    margin-top:3px
}

.file-size,.file-date {
    font-size:11px;
    color:var(--grass-color-text-muted);
    font-variant-numeric:tabular-nums
}

.file-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:9px
}

.file-actions .gu-action {
    min-height:32px;
    padding:7px 10px;
    font-size:11px;
    font-weight:600;
    white-space:nowrap
}

.download-action {
    color:var(--grass-color-brand);
    border-color:var(--grass-color-success-border)
}

.copy-button {
    display:grid;
    place-items:center;
    width:29px;
    height:32px;
    background:none;
    border:0;
    border-radius:6px;
    color:var(--grass-color-text-subtle)
}

.copy-button:hover {
    color:var(--grass-color-brand);
    background:var(--grass-color-brand-soft)
}

.copy-button svg {
    width:16px;
    height:16px
}

.list-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:61px;
    padding:12px 28px;
    color:var(--grass-color-text-subtle);
    font-size:11px;
    gap:12px
}

.list-footer nav {
    display:flex;
    gap:8px
}

.list-footer .gu-action {
    font-size:11px;
    min-height:30px
}

.empty-state {
    text-align:center;
    padding:52px 24px 66px;
    border-top:1px solid var(--grass-color-border)
}

.empty-symbol {
    display:grid;
    place-items:center;
    margin:0 auto 19px;
    width:57px;
    height:57px;
    background:var(--grass-color-brand-soft);
    color:var(--grass-color-brand);
    font-size:29px;
    border-radius:18px
}

.empty-state h3 {
    font-size:17px;
    font-weight:600;
    margin:0 0 8px
}

.empty-state p {
    color:var(--grass-color-text-muted);
    font-size:12px;
    margin-bottom:23px
}

.empty-state .gu-action {
    font-size:12px
}

.download-tip {
    display:flex;
    align-items:center;
    gap:12px;
    padding:17px 2px;
    color:var(--grass-color-text-muted);
    font-size:11px
}

.download-tip p {
    margin:0
}

.tip-icon {
    border:1px solid var(--grass-color-text-subtle);
    border-radius:50%;
    width:15px;
    height:15px;
    line-height:13px;
    text-align:center;
    flex-shrink:0;
    font-size:10px
}

.tip-label {
    margin-left:auto;
    white-space:nowrap;
    color:var(--grass-color-text-subtle)
}

.site-footer {
    max-width:1106px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:25px 0;
    border-top:1px solid var(--grass-color-border);
    color:var(--grass-color-text-subtle);
    font-size:10px
}

.site-footer strong {
    color:var(--grass-color-text-muted);
    font-size:12px;
    letter-spacing:-.4px
}

.footer-separator {
    margin:0 13px
}

.footer-dot {
    margin:0 8px
}

.placeholder-page {
    padding:62px 0 100px;
    max-width:760px
}

.placeholder-page h1 {
    font-size:clamp(42px,6vw,72px);
    line-height:1.18;
    margin:26px 0
}

.placeholder-page em {
    font-style:normal;
    color:var(--grass-color-brand)
}

.placeholder-page p {
    color:var(--grass-color-text-muted);
    line-height:2;
    margin:25px 0 32px
}

.placeholder-page .gu-action {
    padding:13px 23px;
    gap:27px
}

.placeholder-note {
    font-size:12px;
    color:var(--grass-color-text-subtle);
    margin-top:32px
}

.placeholder-note span {
    margin:0 10px
}

.notification {
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    background:var(--grass-color-text);
    color:var(--grass-color-surface);
    border-radius:10px;
    padding:14px 22px;
    box-shadow:var(--grass-shadow-lg);
    z-index:10;
    max-width:calc(100vw - 32px);
    font-size:13px
}

.notification input {
    min-width:240px;
    margin-top:10px
}

.sr-only,.skip-link:not(:focus) {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

.skip-link:focus {
    position:fixed;
    top:8px;
    left:8px;
    padding:10px;
    background:var(--grass-color-surface);
    z-index:20
}

@media(min-width:1400px) {
    .site-main {
        padding-top:76px
    }
    .page-heading {
        margin-bottom:44px
    }
}

@media(max-width:800px) {
    .header-inner {
        padding:17px 24px;
        gap:35px
    }
    .public-badge {
        display:none
    }
    .header-inner nav a[aria-current]:after {
        bottom:-18px
    }
    .site-main {
        padding:38px 24px 50px
    }
    .access-note {
        display:none
    }
    .site-footer {
        margin:0 24px
    }
    .file-table-head,.file-row {
        grid-template-columns:minmax(0,1fr) 75px 115px;
        gap:12px;
        padding-inline:20px
    }
    .file-table-head>span:nth-child(3),.file-date {
        display:none
    }
    .panel-title,.directory-bar,.file-toolbar {
        padding-inline:20px
    }
    .file-toolbar {
        gap:8px
    }
    .sort-select {
        width:135px
    }
    .panel-title>div>span {
        display:none
    }
}

@media(max-width:520px) {
    .header-inner {
        padding:15px 16px;
        gap:24px;
        flex-wrap:wrap
    }
    .brand {
        font-size:20px;
        gap:8px
    }
    .brand img {
        width:30px;
        height:30px
    }
    .header-inner nav {
        gap:20px;
        font-size:12px;
        order:3;
        flex-basis:100%
    }
    .header-inner nav a[aria-current]:after {
        bottom:-16px
    }
    .header-actions .gu-action {
        min-height:32px;
        font-size:11px
    }
    .site-main {
        padding:32px 16px 40px
    }
    .page-heading {
        margin-bottom:25px
    }
    h1 {
        font-size:34px
    }
    .page-heading p {
        font-size:12px
    }
    .file-toolbar {
        flex-wrap:wrap;
        padding:17px 16px
    }
    .search-field {
        flex-basis:100%;
        max-width:none
    }
    .sort-select {
        flex:1
    }
    .directory-bar {
        padding:12px 16px;
        flex-wrap:wrap;
        gap:5px
    }
    .panel-title {
        padding:19px 16px
    }
    .file-table-head {
        display:none
    }
    .file-row {
        grid-template-columns:minmax(0,1fr) 104px;
        gap:8px;
        padding:17px 16px;
        min-height:94px
    }
    .file-size {
        grid-column:1;
        font-size:10px;
        padding-left:50px;
        margin-top:-9px
    }
    .file-actions {
        grid-column:2;
        grid-row:1 / span 2
    }
    .file-identity {
        gap:11px
    }
    .file-icon {
        width:36px;
        height:40px
    }
    .file-name {
        font-size:12px
    }
    .file-kind {
        display:none
    }
    .list-footer {
        padding:15px 16px
    }
    .download-tip {
        align-items:flex-start;
        font-size:10px;
        line-height:1.8
    }
    .tip-icon {
        margin-top:2px
    }
    .tip-label {
        display:none
    }
    .site-footer {
        margin:0 16px;
        flex-direction:column;
        gap:5px
    }
    .placeholder-page {
        padding:38px 0 80px
    }
    .placeholder-page p {
        font-size:13px
    }
}