:root{
      /* Windows 95 palette */
      --desk: #008080;          /* background teal */
      --win:  #c0c0c0;          /* window gray */
      --light:#ffffff;          /* top/left highlight */
      --mid:  #b5b5b5;          /* mid line */
      --dark: #7d7d7d;          /* bottom/right shadow */
      --darker:#404040;         /* deep shadow */
      --ink: #000000;           /* text */
      --accent:#000080;         /* active title bar blue */
      --accent-inactive:#808080;/* inactive title bar */

      --gap: 12px;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body{
      margin:0;
      background: var(--desk);
      font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif;
      color: var(--ink);
      display:grid;
      place-items:center;
    }

    /* Window shell */
    .window{
      width: min(980px, 92vw);
      background: var(--win);
      border: 2px solid var(--darker);
      box-shadow:
        inset -1px -1px 0 var(--dark),
        inset 1px 1px 0 var(--light),
        inset -2px -2px 0 var(--darker),
        inset 2px 2px 0 var(--mid);
    }
    .titlebar{
      background: linear-gradient(#000080, #000060);
      color: #fff;
      padding: 3px 6px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      user-select:none;
    }
    .titlebar .title{
      font-weight:bold;
      letter-spacing:.2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .titlebar .controls{
      display:flex; gap:4px;
    }
    .ctrl-btn{
      width: 18px; height: 18px;
      background: var(--win);
      border: 1px solid var(--darker);
      box-shadow:
        inset -1px -1px 0 var(--dark),
        inset 1px 1px 0 var(--light);
      display:grid; place-items:center;
      cursor:pointer;
    }
    .ctrl-btn:active{
      box-shadow:
        inset 1px 1px 0 var(--dark),
        inset -1px -1px 0 var(--light);
    }
    .ctrl-x{
      font-size: 12px; line-height: 1; color: var(--ink);
    }

    .window-body{
      padding: 12px;
      display:grid;
      gap: var(--gap);
    }

    /* Info bar (greeting) */
    .group{
      border: 2px solid var(--dark);
      box-shadow:
        inset -1px -1px 0 var(--darker),
        inset 1px 1px 0 var(--light);
      background: var(--win);
      padding: 10px;
    }
    .group .label{
      position:relative;
      top:-18px; left:8px;
      background: var(--win);
      padding: 0 6px;
      font-size: 12px;
    }
    .greeting{
      margin-top:-8px;
      font-size: 18px;
      font-weight:bold;
    }

    /* Grid of Win95 buttons */
    .grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: var(--gap);
    }
    @media (max-width: 700px){
      .grid{ grid-template-columns: 1fr; }
    }

    .w95-button{
      display:block;
      width:100%;
      text-align:center;
      padding: 22px 12px;
      background: var(--win);
      color: var(--ink);
      text-decoration:none;
      border: 2px solid var(--darker);
      box-shadow:
        inset -1px -1px 0 var(--dark),
        inset 1px 1px 0 var(--light),
        inset -2px -2px 0 var(--darker),
        inset 2px 2px 0 var(--mid);
      cursor:pointer;
      user-select:none;
      font-weight:bold;
    }
    .w95-button:focus{
      outline: 1px dotted #000;
      outline-offset: -4px;
    }
    .w95-button:hover{
      filter: brightness(1.02);
    }
    .w95-button:active{
      /* pressed look */
      box-shadow:
        inset 1px 1px 0 var(--dark),
        inset -1px -1px 0 var(--light),
        inset 2px 2px 0 var(--darker),
        inset -2px -2px 0 var(--mid);
      padding-top: 23px; /* tiny nudge for realism */
      padding-bottom: 21px;
    }

        .grid .center{ grid-column: 2; grid-row: 2; }
    @media (max-width: 700px){ .grid .center{ grid-column:auto; grid-row:auto; } }

    /* Footer link */
    .footer{
      display:flex; justify-content:flex-end;
      gap:8px;
    }
    .link{
      color:#0000ee;
      text-decoration:underline;
      cursor:pointer;
    }

    /* Name overlay -> Win95 dialog */
    .overlay{
      position: fixed; inset: 0;
      background: rgba(0,0,0,.35);
      display:grid; place-items:center;
      z-index: 999;
    }
    .overlay.hidden{ display:none; }

    .dialog{
      width: min(420px, 92vw);
      background: var(--win);
      border: 2px solid var(--darker);
      box-shadow:
        inset -1px -1px 0 var(--dark),
        inset 1px 1px 0 var(--light),
        6px 6px 0 rgba(0,0,0,.25);
    }
    .dialog .titlebar{
      background: linear-gradient(var(--accent), #000064);
    }
    .dialog-body{
      padding: 12px;
      display:grid; gap: 10px;
    }
    .row{ display:flex; gap:10px; align-items:center; }
    label{ min-width: 110px; }

    .input, .btn{
      font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif;
      font-size: 14px;
    }
    .input{
      flex:1;
      padding: 6px 6px;
      background: #fff;
      color: var(--ink);
      border: 2px solid var(--darker);
      box-shadow:
        inset -1px -1px 0 var(--dark),
        inset 1px 1px 0 var(--light);
    }
    .btn{
      padding: 6px 14px;
      background: var(--win);
      border: 2px solid var(--darker);
      box-shadow:
        inset -1px -1px 0 var(--dark),
        inset 1px 1px 0 var(--light);
      cursor:pointer;
    }
    .btn:active{
      box-shadow:
        inset 1px 1px 0 var(--dark),
        inset -1px -1px 0 var(--light);
      transform: translateY(1px);
    }
    .error{
      color: #b91c1c;
      min-height: 1.2em;
      font-size: 12px;
    }

    /* Accessibility */
    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; animation:none !important; }
    }
    
footer { font-family: "MS Sans Serif", Tahoma, sans-serif; font-size: 12px; color: black; text-align: center; margin-top: 20px; padding-bottom: 20px; }