@font-face{
  font-family:"Spline Sans Mono";
  src:url("fonts/SplineSansMono.ttf") format("truetype-variations"),
      url("fonts/SplineSansMono.ttf") format("truetype");
  font-weight:300 700;
  font-display:swap;
}

:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#8a8a8e;
  --accent:#111111;
  --line: rgba(0,0,0,0.1);
  --card-bg: rgba(0,0,0,0.035);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{
  margin:0;padding:0;width:100%;height:100%;overflow:hidden;
  font-family:"Spline Sans Mono", Menlo, monospace;
  background:var(--bg);
  color:var(--text);
  -webkit-user-select:none;user-select:none;
}

.hall{
  position:fixed;inset:0;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
}

/* la colonna centrale si auto-centra: è un flex column, quando il menu
   cresce/si apre il contenitore intero resta centrato dalla flexbox del
   parent, e la transizione su max-height/opacity del menu rende il tutto
   morbido invece che a scatto */
.center-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:380px;
}

.title-btn{
  all:unset;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  padding:18px 26px;
  border-radius:16px;
  transition:background .25s ease, transform .2s ease;
}
.title-btn:active{transform:scale(0.97);background:rgba(0,0,0,0.04);}

.title-main{
  font-size:30px;
  font-weight:700;
  letter-spacing:-0.01em;
}
.title-sub{
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:0.02em;
}
.chevron{
  width:20px;height:20px;
  margin-top:6px;
  color:var(--muted);
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.title-btn[aria-expanded="true"] .chevron{
  transform:rotate(180deg);
  color:var(--text);
}

.menu{
  width:100%;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(-6px);
  transition:
    max-height .5s cubic-bezier(.4,0,.2,1),
    opacity .35s ease,
    transform .45s cubic-bezier(.4,0,.2,1);
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6px;
}
.menu.open{
  max-height:400px;
  opacity:1;
  transform:translateY(0);
}

.menu-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 16px;
  border-radius:14px;
  background:var(--card-bg);
  border:1px solid var(--line);
  text-decoration:none;
  color:var(--text);
  transition:background .2s ease, transform .15s ease;
}
.menu-item:active{
  transform:scale(0.97);
  background:rgba(0,0,0,0.07);
}

.menu-icon{
  width:40px;height:40px;flex:none;
  border-radius:10px;
  background:rgba(0,0,0,0.06);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
}
.menu-icon svg{width:20px;height:20px}

.menu-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
}
.menu-title{font-size:15px;font-weight:600;}
.menu-desc{font-size:12px;color:var(--muted);}

.menu-arrow{width:17px;height:17px;flex:none;color:var(--muted);}