.traffic{display:flex;align-items:center;gap:8px}
    .traffic :is(span,button){
      width:16px;height:16px;display:block;position:relative;border-radius:50%;
      border:1px solid rgba(0,0,0,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
      transition:filter .14s ease,transform .14s ease;
    }
    .traffic .r{background:#ff5f57}.traffic .y{background:#febc2e}.traffic .g{background:#28c840}
    .traffic :is(span,button)::before,.traffic :is(span,button)::after{
      content:'';position:absolute;left:50%;top:50%;display:block;background:rgba(48,40,34,.62);
      border-radius:1px;opacity:0;transition:opacity .12s ease;transform-origin:center;
    }
    .traffic:hover :is(span,button)::before,.traffic:hover :is(span,button)::after{opacity:1}
    .traffic:hover :is(span,button){filter:brightness(.93) saturate(.96)}
    .traffic :is(span,button):hover{transform:scale(.96)}
    .traffic .r::before{width:6.5px;height:1.25px;transform:translate(-50%,-50%) rotate(45deg)}
    .traffic .r::after{width:6.5px;height:1.25px;transform:translate(-50%,-50%) rotate(-45deg)}
    .traffic .y::before{width:6.5px;height:1.25px;transform:translate(-50%,-50%)}
    .traffic .g::before,.traffic .g::after{width:4.5px;height:4.5px;background:transparent}
    .traffic .g::before{border-top:1.25px solid rgba(38,55,42,.66);border-right:1.25px solid rgba(38,55,42,.66);transform:translate(-50%,-50%) translate(2px,-2px)}
    .traffic .g::after{border-bottom:1.25px solid rgba(38,55,42,.66);border-left:1.25px solid rgba(38,55,42,.66);transform:translate(-50%,-50%) translate(-2px,2px)}

    .dw-traffic { display:flex; gap:8px; flex-shrink:0; align-items:center; }
    .dw-traffic :is(span,button) {
      width:16px;height:16px;border-radius:50%;display:block;cursor:pointer;position:relative;
      border:1px solid rgba(0,0,0,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
      transition:filter .14s ease,transform .14s ease;
    }
    .dw-traffic :is(span,button)::before,.dw-traffic :is(span,button)::after {
      content:'';position:absolute;left:50%;top:50%;display:block;background:rgba(48,40,34,.62);
      border-radius:1px;opacity:0;transition:opacity .12s ease;transform-origin:center;
    }
    /* macOS 行为：鼠标进入红绿灯区域，三个标记同时出现。 */
    .dw-traffic:hover :is(span,button)::before,.dw-traffic:hover :is(span,button)::after { opacity:1; }
    .dw-traffic:hover :is(span,button) { filter:brightness(.93) saturate(.96); }
    .dw-traffic :is(span,button):hover { transform:scale(.96); }
    .dw-close { background:#ff5f57; }
    .dw-traffic .dw-close::before { width:6.5px;height:1.25px;transform:translate(-50%,-50%) rotate(45deg); }
    .dw-traffic .dw-close::after { width:6.5px;height:1.25px;transform:translate(-50%,-50%) rotate(-45deg); }
    .dw-min { background:#febc2e; }
    .dw-traffic .dw-min::before { width:6.5px;height:1.25px;transform:translate(-50%,-50%); }
    .dw-max { background:#28c840; }
    .dw-traffic .dw-max::before,.dw-traffic .dw-max::after { width:4.5px;height:4.5px;background:transparent; }
    .dw-traffic .dw-max::before { border-top:1.25px solid rgba(38,55,42,.66);border-right:1.25px solid rgba(38,55,42,.66);transform:translate(-50%,-50%) translate(2px,-2px); }
    .dw-traffic .dw-max::after { border-bottom:1.25px solid rgba(38,55,42,.66);border-left:1.25px solid rgba(38,55,42,.66);transform:translate(-50%,-50%) translate(-2px,2px); }

    /* Traffic lights: retain existing dimensions and spacing on desktop and touch. */
    .traffic :is(span,button),.dw-traffic :is(span,button){
      background:var(--light-fill);border-color:rgba(0,0,0,.1);
      box-shadow:inset 0 1px 1px rgba(255,255,255,.3),0 .5px .5px rgba(0,0,0,.08);
      transition:background-color .1s ease,border-color .1s ease,box-shadow .1s ease;
    }
    .traffic .r,.dw-traffic .dw-close{--light-fill:#ff6058;--light-symbol:#820b05}
    .traffic .y,.dw-traffic .dw-min{--light-fill:#ffbd2e;--light-symbol:#985700}
    .traffic .g,.dw-traffic .dw-max{--light-fill:#28c840;--light-symbol:#076912}
    .traffic :is(span,button)::before,.traffic :is(span,button)::after,.dw-traffic :is(span,button)::before,.dw-traffic :is(span,button)::after{
      background:var(--light-symbol);border:0;border-radius:1px;opacity:0;
      transition:opacity .08s linear;pointer-events:none;
    }
    .traffic:hover :is(span,button),.dw-traffic:hover :is(span,button),.traffic :is(span,button):hover,.dw-traffic :is(span,button):hover{filter:none;transform:none}
    .traffic:hover :is(span,button)::before,.traffic:hover :is(span,button)::after,
    .dw-traffic:hover :is(span,button)::before,.dw-traffic:hover :is(span,button)::after{opacity:1}
    .traffic .r::before,.traffic .r::after,
    .dw-traffic .dw-close::before,.dw-traffic .dw-close::after{width:8px;height:2px}
    .traffic .y::before,.dw-traffic .dw-min::before{width:8px;height:2px}
    .traffic .g::before,.traffic .g::after,
    .dw-traffic .dw-max::before,.dw-traffic .dw-max::after{
      width:5.5px;height:5.5px;border:0;border-radius:.3px;background:var(--light-symbol);
    }
    .traffic .g::before,.dw-traffic .dw-max::before{
      clip-path:polygon(0 0,100% 0,100% 100%);transform:translate(-50%,-50%) translate(1.6px,-1.6px);
    }
    .traffic .g::after,.dw-traffic .dw-max::after{
      clip-path:polygon(0 0,100% 100%,0 100%);transform:translate(-50%,-50%) translate(-1.6px,1.6px);
    }
    .desktop-window:not(.active) .dw-traffic :is(span,button){background:#c9c9cc;border-color:rgba(0,0,0,.08);box-shadow:inset 0 1px .5px rgba(255,255,255,.24)}
    .desktop-window:not(.active) .dw-traffic:hover :is(span,button){background:var(--light-fill)}
    .traffic :is(span,button):active,.dw-traffic :is(span,button):active{
      filter:brightness(.83);transform:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.12);
    }
    @media(prefers-reduced-motion:reduce){.traffic :is(span,button),.dw-traffic :is(span,button),.traffic :is(span,button)::before,.traffic :is(span,button)::after,.dw-traffic :is(span,button)::before,.dw-traffic :is(span,button)::after{transition:none}}

  
.dw-traffic button{appearance:none;-webkit-appearance:none;padding:0;flex-shrink:0;font:inherit}
.dw-traffic button:focus-visible{outline:2px solid #3277cf;outline-offset:3px}
.dw-traffic:focus-within button::before,.dw-traffic:focus-within button::after{opacity:1}
@media(pointer:coarse){.dw-traffic button{width:18px;height:18px}}