:root{
      --bg:#000000;
      --fg:#39ff6f;
      --fg-dim:#1ea043;
      --fg-soft:#0f5c26;
      --line:#123d1d;
    }

    *{box-sizing:border-box}

    html,body{
      margin:0;
      width:100%;
      height:100%;
      background:var(--bg);
      color:var(--fg);
      font-family:"IBM Plex Mono","Courier New",monospace;
      overflow:hidden;
    }

    .app{
      width:100vw;
      height:100vh;
      display:grid;
      grid-template-columns: 420px 1fr;
    }

    .left{
      border-right:1px solid var(--line);
      display:grid;
      grid-template-rows: 44px 1fr 56px;
      min-width:0;
      min-height:0;
    }

    .right{
      display:grid;
      grid-template-rows: 44px 1fr 56px;
      min-width:0;
      min-height:0;
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 14px;
      border-bottom:1px solid var(--line);
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .terminal{
      padding:14px;
      overflow:auto;
      min-height:0;
      scrollbar-width:thin;
      scrollbar-color:var(--fg-soft) #000;
    }

    .terminal::-webkit-scrollbar{
      width:10px;
    }

    .terminal::-webkit-scrollbar-track{
      background:#000;
    }

    .terminal::-webkit-scrollbar-thumb{
      background:var(--fg-soft);
      border:2px solid #000;
    }

    .line{
      margin:0 0 6px;
      line-height:1.55;
      font-size:14px;
      white-space:pre-wrap;
      word-break:break-word;
    }

    .dim{ color:var(--fg-dim); }
    .soft{ color:var(--fg-soft); }

    .prompt-row{
      display:flex;
      align-items:center;
      gap:10px;
      margin-top:12px;
    }

    .prompt{
      color:var(--fg);
      flex:0 0 auto;
    }

    .input{
      flex:1 1 auto;
      background:transparent;
      border:none;
      outline:none;
      color:var(--fg);
      font:inherit;
      caret-color:var(--fg);
    }

    .statusbar{
      border-top:1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:0 14px;
      color:var(--fg-dim);
      font-size:12px;
    }

    .canvas-wrap{
      position:relative;
      overflow:hidden;
      background:#000;
      isolation:isolate;
    }

    .canvas-wrap::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(rgba(18,61,29,.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,61,29,.22) 1px, transparent 1px);
      background-size:28px 28px;
      z-index:2;
      pointer-events:none;
    }

    .canvas-wrap::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 50% 42%, rgba(57,255,111,.08), transparent 36%),
        radial-gradient(circle at 50% 50%, transparent 40%, rgba(0,0,0,.45) 100%);
      z-index:3;
      pointer-events:none;
    }

    .face-layer{
      position:absolute;
      inset:0;
      z-index:1;
      pointer-events:none;
      opacity:.5;
    }

    .face-layer canvas{
      width:100%;
      height:100%;
      display:block;
      filter:contrast(1.1) brightness(.8);
    }

    .canvas{
      position:relative;
      width:100%;
      height:100%;
      overflow:hidden;
      z-index:4;
    }

    .face-ornaments{
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
    }

    .story-panel{
      position:absolute;
      left:24px;
      top:22px;
      width:min(380px, 34vw);
      min-height:128px;
      z-index:6;
      pointer-events:none;
      padding:14px 16px;
      border:1px solid rgba(57,255,111,.3);
      background:linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,.82));
      box-shadow:
        0 0 0 1px rgba(57,255,111,.08) inset,
        0 22px 48px rgba(0,0,0,.42);
      backdrop-filter:blur(2px);
    }

    .story-kicker{
      margin:0 0 10px;
      color:var(--fg);
      font-size:11px;
      text-shadow:0 0 10px rgba(57,255,111,.12);
      letter-spacing:.16em;
      text-transform:uppercase;
    }

    .story-copy{
      display:grid;
      gap:8px;
    }

    .story-line{
      min-height:1.4em;
      color:var(--fg-dim);
      font-size:14px;
      line-height:1.5;
      white-space:pre-wrap;
      text-shadow:0 0 12px rgba(57,255,111,.08);
    }

    .story-line.lead{
      color:var(--fg-dim);
    }

    .story-line.action{
      color:var(--fg);
    }

    mark.cmd{
      background:transparent;
      color:var(--fg);
      border:1px solid rgba(57,255,111,.3);
      padding:1px 7px;
      font-style:normal;
    }

    .story-line.typing::after{
      content:"_";
      display:inline-block;
      margin-left:2px;
      color:var(--fg);
      animation:story-caret .7s steps(1) infinite;
    }

    @keyframes story-caret{
      50%{
        opacity:0;
      }
    }

    .face-center{
      position:absolute;
      left:50%;
      top:52%;
      width:min(78%, 680px);
      aspect-ratio:1;
      transform:translate(-50%,-50%);
      opacity:.42;
      transition:transform 700ms ease, opacity 700ms ease, filter 700ms ease;
      filter:drop-shadow(0 0 30px rgba(57,255,111,.06));
    }

    .face-ring,
    .face-bracket,
    .face-axis,
    .face-marker,
    .face-scan{
      position:absolute;
      transition:opacity 700ms ease, transform 700ms ease, border-color 700ms ease;
    }

    .face-ring{
      inset:0;
      border:1px solid rgba(57,255,111,.12);
      border-radius:50%;
    }

    .face-ring.ring-b{
      inset:12%;
      border-color:rgba(57,255,111,.08);
      border-radius:46% 54% 51% 49% / 49% 52% 48% 51%;
      transform:rotate(-12deg);
    }

    .face-ring.ring-c{
      inset:26%;
      border-color:rgba(57,255,111,.06);
    }

    .face-axis{
      background:linear-gradient(90deg, transparent, rgba(57,255,111,.18), transparent);
      opacity:.16;
    }

    .face-axis.axis-x{
      left:6%;
      right:6%;
      top:50%;
      height:1px;
      transform:translateY(-50%);
    }

    .face-axis.axis-y{
      top:6%;
      bottom:6%;
      left:50%;
      width:1px;
      background:linear-gradient(180deg, transparent, rgba(57,255,111,.14), transparent);
      transform:translateX(-50%);
    }

    .face-bracket{
      width:72px;
      height:72px;
      border:1px solid rgba(57,255,111,.2);
      opacity:.26;
    }

    .face-bracket.tl{
      left:14%;
      top:18%;
      border-right:none;
      border-bottom:none;
    }

    .face-bracket.tr{
      right:14%;
      top:18%;
      border-left:none;
      border-bottom:none;
    }

    .face-bracket.bl{
      left:14%;
      bottom:18%;
      border-right:none;
      border-top:none;
    }

    .face-bracket.br{
      right:14%;
      bottom:18%;
      border-left:none;
      border-top:none;
    }

    .face-marker{
      width:10px;
      height:10px;
      background:#000;
      border:1px solid rgba(57,255,111,.3);
      opacity:.24;
    }

    .face-marker.m1{
      left:23%;
      top:32%;
    }

    .face-marker.m2{
      right:23%;
      top:30%;
    }

    .face-marker.m3{
      left:17%;
      bottom:30%;
    }

    .face-marker.m4{
      right:20%;
      bottom:24%;
    }

    .face-scan{
      left:15%;
      right:15%;
      top:33%;
      height:32%;
      border-top:1px solid rgba(57,255,111,.08);
      border-bottom:1px solid rgba(57,255,111,.05);
      background:linear-gradient(180deg, transparent, rgba(57,255,111,.045), transparent);
      opacity:.22;
      clip-path:polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
    }

    .canvas-wrap[data-stage="idle"] .face-center{
      opacity:.38;
    }

    .canvas-wrap[data-stage="idle"] .face-ring.ring-b{
      transform:rotate(-12deg) scale(.98);
    }

    .canvas-wrap[data-stage="speak"] .face-center{
      opacity:.5;
      transform:translate(-50%,-50%) scale(1.02);
      filter:drop-shadow(0 0 44px rgba(57,255,111,.1));
    }

    .canvas-wrap[data-stage="speak"] .face-ring.ring-a{
      transform:scale(1.03);
      border-color:rgba(57,255,111,.18);
    }

    .canvas-wrap[data-stage="speak"] .face-scan{
      opacity:.3;
      transform:scaleY(1.05);
    }

    .canvas-wrap[data-stage="listen"] .face-center{
      opacity:.34;
      transform:translate(-50%,-50%) scale(.98);
    }

    .canvas-wrap[data-stage="listen"] .face-axis.axis-y{
      opacity:.22;
    }

    .canvas-wrap[data-stage="listen"] .face-bracket{
      opacity:.18;
      transform:scale(.96);
    }

    .canvas-wrap[data-stage="connect"] .face-center{
      opacity:.48;
    }

    .canvas-wrap[data-stage="connect"] .face-marker,
    .canvas-wrap[data-stage="connect"] .face-bracket{
      opacity:.4;
    }

    .canvas-wrap[data-stage="amplify"] .face-center{
      opacity:.56;
      transform:translate(-50%,-50%) scale(1.04);
      filter:drop-shadow(0 0 54px rgba(57,255,111,.14));
    }

    .canvas-wrap[data-stage="amplify"] .face-ring.ring-a,
    .canvas-wrap[data-stage="amplify"] .face-ring.ring-b{
      border-color:rgba(57,255,111,.2);
    }

    .canvas-wrap[data-stage="amplify"] .face-marker{
      opacity:.46;
      transform:scale(1.08);
    }

    .canvas-wrap[data-stage="echo"] .face-center{
      opacity:.62;
      transform:translate(-50%,-50%) scale(1.06);
      filter:drop-shadow(0 0 68px rgba(57,255,111,.18));
    }

    .canvas-wrap[data-stage="echo"] .face-ring.ring-a{
      transform:scale(1.06);
      border-color:rgba(57,255,111,.24);
    }

    .canvas-wrap[data-stage="echo"] .face-ring.ring-b{
      transform:rotate(-12deg) scale(1.03);
      border-color:rgba(57,255,111,.16);
    }

    .canvas-wrap[data-stage="echo"] .face-marker,
    .canvas-wrap[data-stage="echo"] .face-bracket{
      opacity:.5;
    }

    .signal{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      transition:all 700ms ease;
      text-align:center;
      pointer-events:none;
    }

    .signal .core{
      display:inline-block;
      border:1px solid var(--fg);
      padding:10px 14px;
      font-size:14px;
      line-height:1.4;
      background:#000;
      box-shadow:0 0 0 1px rgba(57,255,111,.08) inset;
      transition:all 700ms ease;
      max-width:320px;
    }

    .signal.small .core{
      font-size:11px;
      padding:6px 10px;
      opacity:.42;
      border-color:var(--fg-dim);
      color:var(--fg-dim);
    }

    .signal.medium .core{
      font-size:14px;
      opacity:.75;
    }

    .signal.large .core{
      font-size:20px;
      padding:14px 18px;
      max-width:520px;
    }

    .signal.huge .core{
      font-size:28px;
      padding:18px 22px;
      max-width:720px;
    }

    .node{
      position:absolute;
      z-index:5;
      width:12px;
      height:12px;
      border:1px solid var(--fg-dim);
      background:#000;
      opacity:0;
      transition:opacity 600ms ease, transform 700ms ease;
      transform:scale(.7);
    }

    .node.on{
      opacity:1;
      transform:scale(1);
    }

    .node.aux{
      width:10px;
      height:10px;
      border-color:rgba(57,255,111,.26);
    }

    .node.echo-node{
      width:8px;
      height:8px;
      border-color:rgba(57,255,111,.34);
      background:rgba(0,0,0,.92);
    }

    .link{
      position:absolute;
      z-index:4;
      height:1px;
      background:var(--fg-soft);
      transform-origin:left center;
      opacity:0;
      transform:rotate(var(--angle, 0deg)) scaleX(0);
      transition:
        opacity 220ms ease,
        transform 1400ms cubic-bezier(.19,1,.22,1);
      will-change:transform, opacity;
    }

    .link.on{
      opacity:1;
      transform:rotate(var(--angle, 0deg)) scaleX(1);
    }

    .link.aux{
      background:rgba(57,255,111,.22);
    }

    .link.echo-link{
      background:rgba(57,255,111,.18);
    }

    .echo{
      position:absolute;
      border:1px dashed var(--fg-soft);
      color:var(--fg-dim);
      padding:8px 10px;
      font-size:12px;
      opacity:0;
      transition:opacity 700ms ease, transform 700ms ease;
      transform:translateY(8px);
      background:#000;
      max-width:220px;
    }

    .echo.on{
      opacity:1;
      transform:translateY(0);
    }

    .echo.echo-tag{
      padding:6px 8px;
      font-size:11px;
      max-width:160px;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .wave{
      position:absolute;
      left:50%;
      top:50%;
      border:1px solid var(--fg-soft);
      border-radius:50%;
      transform:translate(-50%,-50%) scale(.7);
      opacity:0;
      pointer-events:none;
    }

    .wave.on{
      animation:wave 2.4s linear infinite;
    }

    @keyframes wave{
      0%{
        width:40px;
        height:40px;
        opacity:.75;
        transform:translate(-50%,-50%) scale(.7);
      }
      100%{
        width:900px;
        height:900px;
        opacity:0;
        transform:translate(-50%,-50%) scale(1);
      }
    }

    .canvas-wrap[data-stage="amplify"] .node.aux{
      box-shadow:
        0 0 0 1px rgba(57,255,111,.08) inset,
        0 0 18px rgba(57,255,111,.08);
    }

    .canvas-wrap[data-stage="echo"] .node.echo-node{
      box-shadow:
        0 0 0 1px rgba(57,255,111,.1) inset,
        0 0 22px rgba(57,255,111,.1);
    }

    .canvas-wrap[data-stage="echo"] .echo.echo-tag{
      border-color:rgba(57,255,111,.24);
      box-shadow:0 0 18px rgba(57,255,111,.05);
    }

    .footer{
      border-top:1px solid var(--line);
      padding:0 16px;
      font-size:12px;
      color:var(--fg-dim);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

    .footer strong{
      color:var(--fg);
      font-weight:400;
    }

    @media (max-width: 980px){
      body{overflow:auto}
      .app{
        grid-template-columns:1fr;
        grid-template-rows: 45vh 55vh;
        min-height:100vh;
        height:auto;
      }
      .left{
        border-right:none;
        border-bottom:1px solid var(--line);
      }

      .story-panel{
        display:none;
        left:16px;
        top:16px;
        width:min(calc(100% - 32px), 420px);
      }
    }