:root{
  --navy:#1c2d3f;--navy-deep:#132232;--green:#7a9461;--cream:#f6f4ef;
  --white:#fff;--ink:#16233c;--border:#e7e2db;--muted:#6e7882;
  --homework:#8e5e52;--notes:#637687;--finished:#637a65;--later:#887149;
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);min-height:100vh}
button,input{font:inherit}
[hidden]{display:none!important}
.login{width:min(38rem,calc(100% - 2rem));margin:10vh auto;background:var(--white);padding:clamp(2rem,6vw,4rem);border-radius:1.5rem;box-shadow:0 1rem 4rem rgb(28 45 63 / .09)}
.login__brand,.brand{display:flex;align-items:center;gap:.55rem;color:var(--green);font-size:1.7rem;font-weight:600}
.brand__mark{color:var(--green)}
.login h1,.hero h1{font-family:"Playfair Display",Georgia,serif}
.login h1{font-size:clamp(2.2rem,6vw,4rem);line-height:1.05;margin:2rem 0 1rem}
.login label{display:grid;gap:.5rem;font-weight:600;margin-top:2rem}
.login input{border:1px solid var(--border);border-radius:.75rem;padding:1rem}
.login button{border:0;border-radius:.75rem;background:var(--navy);color:var(--white);padding:1rem 1.4rem;margin-top:1rem;font-weight:600}
.status{min-height:1.5rem;color:var(--muted)}
.shell{min-height:100vh;display:grid;grid-template-columns:15.5rem 1fr}
.sidebar{background:var(--navy-deep);color:var(--white);padding:2rem 1.25rem;display:flex;flex-direction:column;gap:3rem;position:sticky;top:0;height:100vh}
.sidebar nav{display:grid;gap:.6rem}
.nav-item{border:0;background:transparent;color:#aeb7bf;text-align:left;padding:.9rem 1rem;border-radius:.6rem}
.nav-item.is-active{background:rgb(0 0 0 / .16);color:var(--white);font-weight:600}
.identity{margin-top:auto;display:flex;align-items:center;gap:.7rem}
.identity span{width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;background:var(--green)}
.content{padding:clamp(1.5rem,4vw,4rem);max-width:92rem;width:100%;margin:0 auto}
.hero{background:var(--navy-deep);color:var(--white);padding:2.5rem;border-radius:1.35rem;display:flex;justify-content:space-between;align-items:center}
.hero h1{font-size:clamp(2rem,4vw,3.35rem);margin:0}
.hero p{color:#aeb7bf;margin:.6rem 0 0}
.level{width:4rem;height:4rem;display:grid;place-items:center;border-radius:50%;background:var(--green);font-weight:700}
.folders{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,11.75rem));gap:2rem;margin:3rem 0}
.folder{--folder:var(--navy);border:0;background:var(--folder);color:var(--cream);min-height:7rem;border-radius:.35rem .35rem .7rem .7rem;padding:1.65rem 1rem 1rem;position:relative;text-align:left;display:grid;align-content:end;gap:.25rem;cursor:pointer;transition:transform 140ms ease}
.folder::before{content:"";position:absolute;left:0;top:-.75rem;width:46%;height:1rem;background:var(--folder);border-radius:.35rem .7rem 0 0}
.folder:hover,.folder:focus-visible{transform:translateY(-.25rem);outline:0}
.folder:focus-visible{box-shadow:0 0 0 .2rem var(--cream),0 0 0 .4rem var(--navy)}
.folder strong{font-size:1rem}.folder span{opacity:.78;font-size:.8rem}
.folder[data-kind="homework"]{--folder:var(--homework)}
.folder[data-kind="notes"]{--folder:var(--notes)}
.folder[data-kind="finished"]{--folder:var(--finished)}
.folder[data-kind="later"]{--folder:var(--later)}
.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:3rem}
.file{border:0;background:transparent;border-radius:0;padding:0;text-align:left;min-height:0;cursor:pointer;box-shadow:none;overflow:visible;display:flex;flex-direction:column}
.file__page{position:relative;display:block;width:100%;flex:0 0 auto;background:#fbfbfa;aspect-ratio:3/4;color:var(--muted);overflow:hidden;border-radius:0;box-shadow:0 .3rem 1.5rem rgb(28 45 63 / .06)}
.file__page img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.file strong{display:block;order:-1;margin:0 0 .375rem;padding:0;background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){.shell{grid-template-columns:1fr}.sidebar{height:auto;position:static;flex-direction:row;align-items:center;gap:1rem;padding:1rem}.sidebar nav{display:flex}.identity{margin:0 0 0 auto}.content{padding:1rem}.hero{padding:1.5rem}.folders{gap:1.2rem}}