.floor {
    position: absolute; left: -60px; right: -60px; top: 512px; height: 115px;
    background: radial-gradient(50% 50% at 50% 46%, rgba(0, 0, 0, .62), transparent 70%);
    filter: blur(12px);
  }

  .lid {
    position: absolute; left: 5px; bottom: 320px;
    width: 590px; height: 355px;
    transform-origin: 50% 100%;
    transform-style: preserve-3d;
    animation: openLid 4s cubic-bezier(.3, .45, .3, 1) 2.7s both;
  }

  .lid .face {
    position: absolute; inset: 0;
    border-radius: 10px;
    backface-visibility: hidden;
  }

  .lid .face.back {
    transform: rotateY(180deg);
    background:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px),
      linear-gradient(215deg, #30343a 0%, #1d2025 38%, #14161a 72%, #1b1e23 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05),
                inset 0 2px 3px rgba(255, 255, 255, .04);
  }
  .lid .logo {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    border-radius: 12px;
    background: #0c0e11;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
    opacity: 1;
  }
  .lid .logo::after {
    content: ""; position: absolute; inset: 4px;
    border-radius: 9px;
    background: linear-gradient(160deg, rgba(140, 180, 255, .95), rgba(150, 110, 255, .85));
    box-shadow: 0 0 18px 4px rgba(120, 160, 255, .5);
    opacity: 0;
  }
  .stage.play .lid .logo::after { animation: logoOn 1.4s 7s both; }

  .lid .face.screen {
    transform: translateZ(14px);
    background: linear-gradient(180deg, #1c1f24, #121418);
    padding: 16px 16px 26px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  }
  .camera {
    position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
    width: 7px; height: 7px; border-radius: 50%;
    background: #05070a;
    box-shadow: 0 0 0 2px #10141a, inset 0 1px 1px rgba(130, 170, 255, .35);
  }
  .panel {
    position: relative; width: 100%; height: 100%;
    background: #04050a;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #000, inset 0 0 26px rgba(0, 0, 0, .8);
    isolation: isolate;
  }
  .panel .content {
    position: absolute; inset: 0;
    opacity: 0;
    background: linear-gradient(165deg, #0b1018, #05070c 70%);
  }
  .term {
    position: absolute; inset: 30px 34px;
    font-size: 10px; line-height: 1.9;
    color: #00ff00;
    text-shadow: rgba(0,255,0,0.77) 0px 0px 7px;
    white-space: nowrap;
  }
  .term .caret {
    display: inline-block; width: 9px; height: 18px; margin-left: 6px;
    background: #c7d3e4;
    box-shadow: 0 0 10px rgba(160, 200, 255, .5);
    vertical-align: middle;
    animation: blink 1.15s steps(1) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }

  .term .line { white-space: nowrap; }

  .term .cmd {
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
  }

  @keyframes typeCmd1 { from { width: 0; } to { width: 19ch; } }
  @keyframes typeCmd2 { from { width: 0; } to { width: 12ch; } }

  .stage.play .cmd1 { animation: typeCmd1 1.71s steps(19) 8.5s both; }
  .stage.play .cmd2 { animation: typeCmd2 1.05s steps(12) 10.6s both; }

  @keyframes lineIn { from { opacity: 0; } to { opacity: 1; } }
  .line2, .line3 { opacity: 0; }
  .stage.play .line2 { animation: lineIn .01s 10.42s forwards; }
  .stage.play .line3 { animation: lineIn .01s 12.05s forwards; }

  @keyframes caretHide { from { opacity: 1; } to { opacity: 0; } }
  .stage.play .caret1 {
    animation: blink 1.15s steps(1) infinite,
               caretHide .01s 10.42s forwards;
  }
  .stage.play .caret2 {
    animation: blink 1.15s steps(1) infinite,
               caretHide .01s 12.05s forwards;
  }

  .stage.play .line3 .out { animation: outGlow 1.2s 12.05s ease-out both; }
  @keyframes outGlow {
    0%   { text-shadow: 0 0 16px rgba(120, 255, 150, .95), 0 0 34px rgba(90, 255, 120, .55); }
    100% { text-shadow: 0 0 10px rgba(130, 175, 255, .28); }
  }

  .panel .glare {
    position: absolute; inset: 0;
    background: linear-gradient(115deg,
      rgba(255, 255, 255, .12) 0%,
      rgba(255, 255, 255, .03) 28%,
      transparent 45%);
  }
/* scanlines */
  .scanlines {
    position: relative;
  }

  .scanlines:before,
  .scanlines:after {
    display: block;
    pointer-events: none;
    content: '';
    position: absolute;
  }

  .scanlines:before {
    width: 100%;
    height: var(--scan-width);
    z-index: calc(var(--scan-z-index) + 1);
    background: var(--bar-color);
    opacity: var(--scan-opacity);
    box-shadow:
      0 -50vh 0 var(--bar-color),
      0 -100vh 0 var(--bar-color),
      0 200vh 0 var(--bar-color);
    animation: scanline 24s linear infinite;
  }

  .scanlines:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--scan-z-index);
    background: linear-gradient(
      to bottom,
      var(--scan-dark) var(--scan-width),
      transparent var(--scan-width),
      transparent 50%,
      var(--scan-color) 51%
    );
    background-size: 100% calc(var(--scan-width) * 2);
    animation: scanlines 1s steps(60) infinite;
  }

  @keyframes scanline {
    0%   { transform: translate3d(0, -100%, 0); }
    100% { transform: translate3d(0, 400vh, 0); }
  }

  @keyframes scanlines {
    0%   { background-position: 0 0; }
    100% { background-position: 0 100%; }
  }

  .panel.scanlines {
    --scan-width: 2px;
    --scan-dark: rgba(0, 0, 0, .55);
    --scan-color: rgba(150, 190, 255, .07);
    --bar-color: rgba(185, 215, 255, .20);
    --scan-opacity: .38;
    --scan-z-index: 10;
  }
  
  
/* scanlines end */

  @keyframes scanlinesFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .stage.play .panel.scanlines::before {
    animation: scanline 24s linear infinite,
               scanlinesFadeIn 0.7s 5.4s both;
  }
  .stage.play .panel.scanlines::after {
    animation: scanlines 1s steps(60) infinite,
               scanlinesFadeIn 0.7s 5.4s both;
  }

  .lid .edge {
    position: absolute;
    background: linear-gradient(180deg, #101318, #07080b);
  }
  .lid .edge.top {
    left: 0; right: 0; top: 0; height: 14px;
    transform-origin: top;
    transform: rotateX(90deg);
    border-radius: 10px 10px 0 0;
  }
  .lid .edge.bottom {
    left: 14px; right: 14px; bottom: 0; height: 14px;
    transform-origin: bottom;
    transform: rotateX(-90deg);
    background:
      repeating-linear-gradient(90deg, #0d1014 0 10px, #171b21 10px 14px, #090b0e 14px 26px),
      #0d1014;
  }
  .lid .edge.left {
    top: 0; bottom: 0; left: 0; width: 14px;
    transform-origin: left;
    transform: rotateY(-90deg);
    border-radius: 10px 0 0 10px;
  }
  .lid .edge.right {
    top: 0; bottom: 0; right: 0; width: 14px;
    transform-origin: right;
    transform: rotateY(90deg);
    border-radius: 0 10px 10px 0;
  }

  .lid .glow {
    position: absolute; left: 8px; right: 8px; top: 8px; bottom: 28px;
    transform: translateZ(18px);
    border-radius: 10px;
    background: radial-gradient(60% 60% at 50% 45%,
      rgba(120, 170, 255, .46), rgba(90, 140, 255, .16) 55%, transparent 75%);
    filter: blur(26px);
    opacity: 0;
    pointer-events: none;
  }

  .base {
    position: absolute; left: 0; top: 380px;
    width: 600px; height: 345px;
    transform-origin: 50% 0;
    transform: rotateX(75deg);
    transform-style: preserve-3d;
    background: linear-gradient(180deg, #26292e, #1a1c20 45%, #131518);
    border-radius: 6px 6px 10px 10px;
  }
  .base .front {
    position: absolute; left: 0; right: 0; top: 100%; height: 50px;
    transform-origin: 50% 0;
    transform: rotateX(-110deg);
    background:
      linear-gradient(90deg,
        rgba(0, 0, 0, .28) 0 2%, rgba(255, 255, 255, .03) 6%,
        rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .10) 50%,
        rgba(255, 255, 255, .05) 70%, rgba(255, 255, 255, .02) 94%, rgba(0, 0, 0, .28) 98% 100%),
      linear-gradient(180deg, #5a6169 0%, #4b5159 22%, #3d434a 55%, #2b2f35 85%, #202329 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35),
                inset 0 -3px 6px rgba(0, 0, 0, .45);
  }
  .base .front::before, .base .front::after {
    content: ""; position: absolute; top: 3px; width: 28px; height: 7px;
    border-radius: 2px;
    background: linear-gradient(180deg, #4b515a, #33383f);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .16), inset 0 1px 3px rgba(0, 0, 0, .55);
  }
  .base .front::before { left: 21%; }
  .base .front::after  { right: 21%; }
  .base .front .chin {
    position: absolute; left: 0; right: 0; top: 100%; height: 12px;
    transform-origin: 50% 0;
    transform: rotateX(-35deg);
    background: linear-gradient(180deg, #383d44, #14161a);
  }
  .base .side {
    position: absolute; top: 0; width: 61px; height: 100%;
    background: linear-gradient(180deg, #24272c, #0d0f12);
  }
  .base .side.l {
    left: 0; transform-origin: left; transform: rotateY(90deg);
    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
  }
  .base .side.r {
    right: 0; transform-origin: right; transform: rotateY(-90deg);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%);
  }
  .base .led {
    position: absolute; right: 46px; top: 50%;
    width: 22px; height: 4px; margin-top: -2px;
    border-radius: 2px;
    background: #1d232b;
    box-shadow: inset 0 0 2px #000;
    opacity: 0;
  }
  .base .led::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: #7fd1a8;
    box-shadow: 0 0 6px 1px rgba(127, 209, 168, .8);
  }
  .keys {
    position: absolute; left: 26px; right: 26px; top: 16px; height: 176px;
    border-radius: 8px;
    background-color: #0f1114;
    background-image: radial-gradient(circle at 50% 50%, #23262b 61%, transparent 65%);
    background-size: 48px 30px;
    background-position: center;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .03);
  }
  .nub {
    position: absolute; left: 50%; top: 70px; width: 15px; height: 15px;
    margin-left: -7.5px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e35c4e, #9c2418 72%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .65), inset 0 -2px 3px rgba(0, 0, 0, .45);
  }
  .trackpad {
    position: absolute; left: 50%; bottom: 26px;
    transform: translateX(-50%);
    width: 180px; height: 92px;
    border-radius: 10px;
    background: linear-gradient(180deg, #1c1f24, #16181c);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 2px 6px rgba(0, 0, 0, .45);
  }
  .light-spill {
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(200deg,
      rgba(120, 170, 255, .32), rgba(90, 140, 255, .10) 45%, transparent 70%);
    opacity: 0;
  }

  @keyframes openLid {
    0%   { transform: rotateX(-100deg); }
    78%  { transform: rotateX(-1deg);   }
    88%  { transform: rotateX(-7deg);   }
    100% { transform: rotateX(-4.5deg); }
  }
  @keyframes screenOn {
    0%, 8%  { opacity: 0;   }
    12%     { opacity: .5;  }
    16%     { opacity: .05; }
    24%     { opacity: .85; }
    30%     { opacity: .15; }
    45%     { opacity: 1;   }
    100%    { opacity: 1;   }
  }
  .stage.play .panel .content { animation: screenOn 1.6s 6.7s both; }

  @keyframes glowIn {
    0%   { opacity: 0;  }
    100% { opacity: 1;  }
  }
  @keyframes glowPulse {
    from { opacity: .72; }
    to   { opacity: 1;   }
  }
  .stage.play .room-glow   { animation: glowIn 1.6s 7.1s both, glowPulse 4s 8.7s ease-in-out infinite alternate; }
  .stage.play .lid .glow   { animation: glowIn 1.6s 7.1s both, glowPulse 4s 8.7s ease-in-out infinite alternate; }
  .stage.play .light-spill { animation: glowIn 1.6s 7.1s both; }
  @keyframes ledOn {
    0%  { opacity: 0; }
    100%{ opacity: 1; }
  }
  .stage.play .base .led { animation: ledOn 1s 7.3s both; }
  @keyframes logoOn {
    0%  { opacity: 0; }
    100%{ opacity: 1; }
  }

  button {
    position: fixed; left: 50%; bottom: 26px;
    transform: translateX(-50%);
    padding: 8px 22px;
    font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .2em;
    color: #9fb0c3;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
  }
  button:hover {
    color: #e6eefb;
    border-color: rgba(140, 180, 255, .5);
    background: rgba(120, 160, 255, .10);
  }

  @media (max-width: 680px) {
    .scene { transform: scale(.55); transform-origin: 50% 42%; }
  }