html, body{
    height:100%;
    margin: 0;
}

body{
    font-family: system-ui, sans-serif;
    background:#677cb0;
    /* background:transparent; */
    color: #e8e8e8;
}

#c {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;         /* behind content */
  pointer-events: auto;
  display:block;
}

.wrap{
    position: relative;
    z-index:1;
    max-width:900px;
    margin: 0 auto;
    padding: 24px;
}

/*
.window{
    position:fixed;
    width:320px;
    border:1px solid rgba(255,255,255,0.2);
    border-radius:12px;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(8px);
    color:#e8e8e8;
    z-index:2;
    box-shadow:0 10px 40px rgba(0,0,0,0.35);
}*/

.titlebar{
    padding:10px 12px;
    cursor:grab;
    user-select:none;
    border-bottom:1px solid rgba(255,255,255,0.15);
    font-weight:600;
}

.titlebar:active{
    cursor:grabbing;
}

.content{
    padding: 12px;
    line-height: 1.35;
}

.top h1{
    margin: 0 0 16px 0;
    opacity: 0.8;
}

.foot{
    margin-top:16px;
    opacity:0.7;
    display:flex;
    gap:10px;
}