/* 試作の切り替えバー — サイトの一部ではない。比較用の道具。 */
.proto{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:140;display:flex;align-items:stretch;background:#111;color:#fff;font:500 12.5px/1 var(--sans,sans-serif);box-shadow:0 10px 30px rgba(0,0,0,.35);max-width:calc(100vw - 20px)}
.proto-min{flex:none;border:0;background:var(--red,#a63c32);color:#fff;padding:0 14px;font:500 11px/1 var(--mono,monospace);letter-spacing:.14em;cursor:pointer;white-space:nowrap}
.proto-body{display:flex;align-items:stretch}
.proto-group{display:flex;align-items:center;border-left:1px solid rgba(255,255,255,.16)}
.proto-group[hidden]{display:none}
.proto-lb{padding:0 8px 0 14px;font:500 10.5px/1 var(--mono,monospace);letter-spacing:.12em;opacity:.6;white-space:nowrap}
.proto-group button{border:0;background:none;color:#fff;padding:13px 11px;cursor:pointer;white-space:nowrap;font:inherit}
.proto-group button:hover{background:rgba(255,255,255,.12)}
.proto-group button[aria-pressed=true]{background:#fff;color:#111}
.proto.is-min .proto-body{display:none}
@media (max-width:860px){
  .proto{left:10px;right:10px;bottom:10px;transform:none;flex-direction:column;max-width:none}
  .proto{font-size:12px}
  .proto-min{padding:6px 10px;text-align:left;font-size:10px}
  .proto-body{flex-direction:column}
  .proto-group{border-left:0;border-top:1px solid rgba(255,255,255,.16);overflow-x:auto}
  .proto-lb{width:46px;flex:none;padding-left:10px;font-size:9.5px}
  .proto-group button{padding:9px 8px}
}
