:root{ --ink:#000; --paper:#2fffd7; }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{ background:var(--ink); color:var(--paper);
      font:16px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace; letter-spacing:.2px;}
    .wrap{max-width:980px;margin:0 auto;padding:28px 18px 56px}
    header{display:flex;align-items:flex-start;gap:16px;margin-bottom: 4px}
    .mark{display:inline-block;padding:10px 14px;border:3px solid var(--paper); color:var(--paper); text-transform:uppercase; font-weight:800; letter-spacing:.12em}
    h1{margin:0;font-size:34px;line-height:1.1}
    .sub{color:var(--paper);opacity:.95;margin-top:4px}
    .block{border:3px solid var(--paper); padding:18px; margin-top:4px; background:transparent; box-shadow: 8px 8px 0 0 var(--paper);}
    .grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch}
    @media (min-width:760px){ .grid{grid-template-columns:1.1fr .9fr} }
    .grid > .block{display:flex;flex-direction:column}
    h2{margin:0 0 10px 0; font-size:16px; text-transform:uppercase; letter-spacing:.18em}
    p{margin:0 0 10px 0}
    .links{display:grid; gap:10px}
    a{color:var(--ink); text-decoration:none}
    .btn{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      background:var(--paper); color:var(--ink);
      padding:12px 14px; border:2px solid var(--ink); border-radius:0;
      font-weight:800; text-transform:uppercase; letter-spacing:.1em; cursor:pointer;
    }
    .btn:hover{filter:brightness(1.03)}
    footer{margin-top:28px;color:#ffe94d}
    .small{font-size:.95rem}

    .stack{display:flex; flex-direction:column; min-height:100%}
    .spacer{flex:1 1 auto}

    

    /* Software/Services */
    .dropdown{ margin-top:10px }
    .dropdown > summary{
      list-style:none; cursor:pointer;
      background:var(--paper); color:var(--ink);
      padding:10px 12px; border:2px solid var(--ink); font-weight:800; text-transform:uppercase; letter-spacing:.1em;
    }
    .dropdown > summary::-webkit-details-marker{ display:none }
    .dropdown .panel{ display:none; background:transparent; color:var(--paper); padding:12px 0 0 0; margin:0 }
    .dropdown[open] .panel{ display:block }
    .chips{display:flex;flex-wrap:wrap;gap:10px}
    .chip{background:transparent; color:var(--paper); padding:8px 12px; border:2px solid var(--paper)}

    .service-list{ display:flex; flex-wrap:wrap; gap:10px }
    .service-list .svc{ background:transparent; color:var(--paper); border:2px solid var(--paper); padding:8px 12px }

    /* Game */
    .game-wrap{display:grid;gap:10px}
  
    /* about link color */
    .block p a{ color: var(--paper); text-decoration: underline; }

/* === SAFE EFFECTS BASE === */
:root{ --paper:#2fffd7; --ink:#000; }




/* Screen scanlines overlay */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9998;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, transparent 1px 2px);
  mix-blend-mode: multiply; opacity:.6;
}




/* -- Requested fixes -- */


/* Software: transparent with turquoise text + outline */
.chips .chip{
  background: transparent !important;
  color: var(--paper) !important;
  border: 2px solid var(--paper) !important;
}


/* Services: transparent with turquoise outline + text */
.service-list .svc, .svc{
  background: transparent !important;
  color: var(--paper) !important;
  border: 2px solid var(--paper) !important;
}






}
.chips .chip, .chip{
  background: transparent !important;
  color: var(--paper) !important;
  border: 2px solid var(--paper) !important;
}
header 

}
header 

/* Size the inline SVG logo */
header 
@media (max-width:560px){ header  }

/* === Video Lightbox === */
#videoOverlay{
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  display:none; align-items:center; justify-content:center;
  z-index:2147483000;
}
#videoOverlay.open{ display:flex; }
#videoModal{ position:relative; width:min(960px, 90vw); }
#videoModal .lbv{ width:100%; height:auto; display:block; background:#000; border:2px solid var(--paper); }
#videoClose{
  position:absolute; top:-12px; right:-12px;
  width:36px; height:36px; border:2px solid var(--paper);
  background:var(--ink); color:var(--paper); cursor:pointer; font-size:22px; line-height:1;
}
#videoClose:hover{ filter:brightness(1.05); }


/* First break: move the whole 'Mental Image Animation' block to next line */

  h1 .mia{display:block}
}

/* Second break: keep 'Mental Image' together; allow 'Animation' to wrap */

  h1 .mental, h1 .image{white-space:nowrap}
}

/* Third break: stack each word */


/* Fine-tune logo on very small screens */
@media (max-width: 560px){
  header 
}




/* keep full phrase on one line as long as possible */

  h1 .mia{display:block}
}
/* keep 'Mental Image' together; 'Animation' may wrap next */

  h1 .mental, h1 .image{white-space:nowrap}
}
/* very narrow: stack all three words */


/* top-align logo firmly */
header
/* Heading wrap control — clean */
h1{margin:0;font-size:34px;line-height:1.1}
h1 .hg{white-space:nowrap;display:inline}
h1 .mia{white-space:nowrap;display:inline}

/* Break 1: move entire 'Mental Image Animation' block to the next line */
@media (max-width: 760px){
  h1 .hg{display:block}
  h1 .mia{display:block}
}

/* Break 2: allow only 'Animation' to wrap (keep 'Mental Image' together) */
@media (max-width: 540px){
  h1 .mia{white-space:normal}
  h1 .mental, h1 .image{white-space:nowrap}
}

/* Break 3: stack each word */
@media (max-width: 420px){
  h1 .mia .mental, h1 .mia .image, h1 .mia .animation{display:block;white-space:normal}
}

/* Logo top alignment */
.logo{display:inline-flex;align-items:flex-start;color:var(--paper);}
.logo svg{display:block;height:62px;width:auto}
header .logo{align-self:flex-start}

/* Moved from inline index.html */
:root{ --ink:#000; --paper:#2fffd7; }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{ background:var(--ink); color:var(--paper);
      font:16px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace; letter-spacing:.2px;}
    .wrap{max-width:980px;margin:0 auto;padding:28px 18px 56px}
    header{display:flex;align-items:flex-start;gap:16px;margin-bottom: 4px}
    .mark{display:inline-block;padding:10px 14px;border:3px solid var(--paper); color:var(--paper); text-transform:uppercase; font-weight:800; letter-spacing:.12em}
    h1{margin:0;font-size:34px;line-height:1.1}
    .sub{color:var(--paper);opacity:.95;margin-top:4px}
    .block{border:3px solid var(--paper); padding:18px; margin-top:4px; background:transparent; box-shadow: 8px 8px 0 0 var(--paper);}
    .grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch}
    @media (min-width:760px){ .grid{grid-template-columns:1.1fr .9fr} }
    .grid > .block{display:flex;flex-direction:column}
    h2{margin:0 0 10px 0; font-size:16px; text-transform:uppercase; letter-spacing:.18em}
    p{margin:0 0 10px 0}
    .links{display:grid; gap:10px}
    a{color:var(--ink); text-decoration:none}
    .btn{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      background:var(--paper); color:var(--ink);
      padding:12px 14px; border:2px solid var(--ink); border-radius:0;
      font-weight:800; text-transform:uppercase; letter-spacing:.1em; cursor:pointer;
    }
    .btn:hover{filter:brightness(1.03)}
    footer{margin-top:28px;color:#ffe94d}
    .small{font-size:.95rem}

    .stack{display:flex; flex-direction:column; min-height:100%}
    .spacer{flex:1 1 auto}

    

    /* Software/Services */
    .dropdown{ margin-top:10px }
    .dropdown > summary{
      list-style:none; cursor:pointer;
      background:var(--paper); color:var(--ink);
      padding:10px 12px; border:2px solid var(--ink); font-weight:800; text-transform:uppercase; letter-spacing:.1em;
    }
    .dropdown > summary::-webkit-details-marker{ display:none }
    .dropdown .panel{ display:none; background:transparent; color:var(--paper); padding:12px 0 0 0; margin:0 }
    .dropdown[open] .panel{ display:block }
    .chips{display:flex;flex-wrap:wrap;gap:10px}
    .chip{background:transparent; color:var(--paper); padding:8px 12px; border:2px solid var(--paper)}

    .service-list{ display:flex; flex-wrap:wrap; gap:10px }
    .service-list .svc{ background:transparent; color:var(--paper); border:2px solid var(--paper); padding:8px 12px }

    /* Game */
    .game-wrap{display:grid;gap:10px}
  
    /* about link color */
    .block p a{ color: var(--paper); text-decoration: underline; }

/* === SAFE EFFECTS BASE === */
:root{ --paper:#2fffd7; --ink:#000; }




/* Screen scanlines overlay */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9998;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, transparent 2px 3px);
  mix-blend-mode: multiply; opacity:.9;
}




/* -- Requested fixes -- */


/* Software: transparent with turquoise text + outline */
.chips .chip{
  background: transparent !important;
  color: var(--paper) !important;
  border: 2px solid var(--paper) !important;
}


/* Services: transparent with turquoise outline + text */
.service-list .svc, .svc{
  background: transparent !important;
  color: var(--paper) !important;
  border: 2px solid var(--paper) !important;
}






}
.chips .chip, .chip{
  background: transparent !important;
  color: var(--paper) !important;
  border: 2px solid var(--paper) !important;
}
header .logo{ display:inline-flex; align-items:center; color: var(--paper); }

}
header .logo{ display:inline-flex; align-items:center; color: var(--paper); }

/* Size the inline SVG logo */
header .logo svg{ display:block; height:60px; width:auto; }
@media (max-width:560px){ header .logo svg{ height:48px; } }











/* === Applied fixes === */
.logo{display:inline-flex;align-items:flex-start;color:var(--paper);}
.logo svg{display:block;height:62px;width:auto}
header .logo{align-self:flex-start}

/* Heading wrap control */
h1{margin:0;font-size:34px;line-height:1.1}
h1 .hg{white-space:nowrap;display:inline}
h1 .mia{white-space:nowrap;display:inline}

@media (max-width:760px){
  h1 .hg{display:block}
  h1 .mia{display:block}
}
@media (max-width:540px){
  h1 .mia{white-space:normal}
  h1 .mental, h1 .image{white-space:nowrap}
}
@media (max-width:420px){
  h1 .mia .mental, h1 .mia .image, h1 .mia .animation{display:block;white-space:normal}
}
/* tighten space under header */
header{ margin-bottom: 4px !important; }


/* tighten spacing below nav/subheader */
.sub{margin-bottom:6px !important;}
main{margin-top:0 !important;}